react-fns is a collection of imperative Browser API's turned into declarative React components and higher-order components for lots of common situations.

There's a lot more to do. The goal is to standardize almost every Web API on MDN.

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()
  • Locales
    • Locales props
    • <Locales render/>
    • withLocales()
  • Utility Components
    • <Mailto />
      • Mailto props
    • <Sms />
      • Sms props
  • Roadmap
    • Useful components
    • Browser API's
  • Author

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.

Detect and retrieve current device Motion.

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

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

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

import { withDeviceMotion } from 'react-fns'

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

export default withDeviceMotion(Inner)

Detect and retrieve current device orientation.

• alpha: number: value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
• beta: 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

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

import { withDeviceOrientation } from 'react-fns'

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

export default withDeviceOrientation(Inner)

Retrieve network access from the browser.

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

import { Network } from 'react-fns'

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

export default Example

import { withNetwork } from 'react-fns'

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

export default withNetwork(Inner)

Retrieve Geo position from the browser.

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

import { GeoPosition } from 'react-fns'

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

export default Example

import { withGeoPosition } from 'react-fns'

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

export default withGeoPosition(Inner)

Retrieve from the browser.

• query: string: A media query

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

import { Media } from 'react-fns'

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

export default Example

Not implemented

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

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

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)

• locales: The current browser locales (navigator.languages or navigator.language)

Returns canonical navigator.languages or navigator.language as locales.

import { Locales } from 'react-fns'

const Example = () =>
  <Locales
    render={({ locales }) =>
     <span>Right now the time and date is {new Intl.DateTimeFormat(locales).format(new Date())}</span>
    }
  />

export default Example

Injects canonical navigator.languages or navigator.language as locales prop.

import { withLocales } from 'react-fns'

const Inner = ({ locales }) => <span>Right now the time and date is {new Intl.DateTimeFormat(locales).format(new

export default withLocales(Inner)

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

• 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

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

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

• Fetch
• Draggable
• Droppable
• Orderable
• InfiniteList
• Parallax
• Pin (to Top / to Bottom)

See https://developer.mozilla.org/en-US/docs/WebAPI for the full list

• MousePosition
• Viewport
  • IntersectionObserver
  • Other implementations
• Audio
• MidiAccess
• Battery Status
• Vibration
• Camera
• Measure

• Jared Palmer @jaredpalmer