react-fns

Modern React components, render-props, hoc's, and utility functions.

react-fns is your React utility belt. It's a collection of declarative components and higher-order components for lots of common situations.

Table of Contents

• API Reference
  • Higher Order Components / Render Props
    • DeviceMotion
      • DeviceMotion props
      • <DeviceMotion render/>
      • withDeviceMotion()
    • DeviceOrientation
      • DeviceOrientation props
      • <DeviceOrientation render/>
      • withDeviceOrientation()
    • Network
      • Network props
      • <Network render/>
      • withNetwork()
    • GeoPosition
      • GeoPosition props
      • <GeoPosition render/>
      • withGeoPosition()
    • Media
      • Media props
      • Media render props
      • <Media render/>
      • withMedia()
    • Scroll
      • Scroll props
      • <Scroll render/>
      • withScroll()
  • Utility Components
    • <Mailto />
      • Mailto props
    • <Sms />
      • Sms propsnp
• Author

There's more to do. The goal is to standardize almost everything on MDN.

API Reference

Higher Order Components / Render Props

When possible, each component (e.g. <Thing/>) in react-fns also exports a higher-order component with identical functionality (e.g. withThing().

Every render prop'd component shares the same three rendering methods:

• <Thing render={props => <Inner />}>
• <Thing component={Inner}>
• <Thing>{props => <Inner />}</Thing>>

All HoC's will pass through any and all additional props through to the inner component in addition to the props that they inject.

DeviceMotion

Detect and retrieve current device Motion.

DeviceMotion props

• acceleration: DeviceMotionEvent.acceleration
• accelerationIncludingGravity: DeviceMotionEvent.accelerationIncludingGravity
• rotationRate: DeviceMotionEvent.rotationRate
• interval: DeviceMotionEvent.interval

For more information about the DeviceMotion API, check out the MDN reference

<DeviceMotion render/>

import { DeviceMotion } from 'react-fns'

const Example = () =>
  <DeviceMotion 
    render={({ alpha, beta, gamma, absolute }) => 
     <pre>
      {JSON.stringify({alpha, beta, gamma}, null, 2)}
     </pre>
    } 
  />

export default Example

withDeviceMotion()

import { withDeviceMotion } from 'react-fns'

const Inner = ({ alpha, beta, gamma, absolute }) => 
  <pre>
    {JSON.stringify({alpha, beta, gamma}, null, 2)}
  </pre>

export default withDeviceMotion(Inner)

DeviceOrientation

Detect and retrieve current device orientation.

DeviceOrientation props

• alpha: number: value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
• betaa: number: value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.
• gamma: number: value represents the motion of the device around the y axis, represented in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.

For more information about the DeviceOrientation API, check out the MDN reference

<DeviceOrientation render/>

import { DeviceOrientation } from 'react-fns'

const Example = () =>
  <DeviceOrientation 
    render={({ alpha, beta, gamma, absolute }) => 
     <pre>
      {JSON.stringify({alpha, beta, gamma}, null, 2)}
     </pre>
    } 
  />

export default Example

withDeviceOrientation()

import { withDeviceOrientation } from 'react-fns'

const Inner = ({ alpha, beta, gamma, absolute }) => 
  <pre>
    {JSON.stringify({alpha, beta, gamma}, null, 2)}
  </pre>

export default withDeviceOrientation(Inner)

Network

Retrieve network access from the browser.

Network props

• online: boolean: true if the browser has network access. false otherwise.
• offlineAt?: Date: Date when network connection was lost.

<Network render/>

import { Network } from 'react-fns'

const Example = () =>
  <Network 
    render={({ online, offlineAt }) => 
     <div>
        {online ? 'Online!' : 'Offline'}
        {offlineAt && `Last connected ${offlineAt.toISOString()}`}
     </div>
    } 
  />

export default Example

withNetwork()

import { withNetwork } from 'react-fns'

const Inner = ({ online, offlineAt }) => 
  <div>
    {online ? 'Online!' : 'Offline'}
    {offlineAt && `Last connected ${offlineAt.toISOString()}`}
  </div>

export default withNetwork(Inner)

GeoPosition

Retrieve Geo position from the browser.

GeoPosition props

• isLoading: boolean: true request status
• coords?: Position: Geoposition object. Has keys of latitude and longitude
• error?: PositionError: GeoPosition error. See MDN for shape.

<GeoPosition render/>

import { GeoPosition } from 'react-fns'

const Example = () =>
  <GeoPosition 
    render={({ isLoading, coords, error }) => 
     <div>
        {coords &&  `${cords.longitude}$,{coords.latitude}`}
     </div>
    } 
  />

export default Example

withGeoPosition()

import { withGeoPosition } from 'react-fns'

const Inner = ({ isLoading, coords, error }) => 
  <div>
   {coords &&  `${cords.longitude}$,{coords.latitude}`}
  </div>

export default withGeoPosition(Inner)

Media

Retrieve from the browser.

Media props

• query: string: A media query

Media render props

• matches: boolean: true if browser matches the media query

<Media render/>

import { Media } from 'react-fns'

const Example = () =>
  <Media 
    query="(min-width: 1000px)"
    render={(match) => 
     <div>
        {match ? 'mobile' : 'desktop'}
     </div>
    } 
  />

export default Example

withMedia()

Not implemented

Scroll

Scroll props

• x: Horizontal scroll in pixels (window.scrollX)
• y: Vertical scroll in pixels (window.scrollX)

<Scroll render/>

Returns window.scrollY and window.scrollX.

import { Scroll } from 'react-fns'

const Example = () =>
  <Scroll 
    render={({ x, y }) => 
     <div>Scroll: {x}, {y}</div>
    } 
  />

export default Example

withScroll()

Injects window.scrollY and window.scrollX as x and y props.

import { withScroll } from 'react-fns'

const Inner = ({ x, y }) => <div>Scroll Position: {x}, {y}</div>

export default withScroll(Inner)

Utility Components

<Mailto />

Renders <a href="mailto:..." />

Mailto props

• email: string: Recipient's email address
• subject?: string: Subject of the email
• cc?: string | string[]: Email address or an array of email addresses to Cc
• bcc?: string | string[]: Email address or an array of email addresses to Bcc (blind copy)
• body?: string: Body copy of the email

<Sms />

Renders <a href="sms:..." />

Sms props

• phone: string: Phone number
• body?: string: Body copy of the text message

Author

• Jared Palmer @jaredpalmer