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

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={({ acceleration, accelerationIncludingGravity, rotationRate, interval }) =>
     <pre>
      {JSON.stringify({acceleration, accelerationIncludingGravity, rotationRate, interval}, null, 2)}
     </pre>
    }
  />

export default Example

`withDeviceMotion()`

import { withDeviceMotion } from 'react-fns'

const Inner = ({ acceleration, accelerationIncludingGravity, rotationRate, interval }) =>
  <pre>
    {JSON.stringify({acceleration, accelerationIncludingGravity, rotationRate, interval}, 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.
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

`<DeviceOrientation render/>`

import { DeviceOrientation } from 'react-fns'

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

export default Example

`withDeviceOrientation()`

import { withDeviceOrientation } from 'react-fns'

const Inner = ({ alpha, beta, gamma, absolute }) =>
  <pre>
    {JSON.stringify({alpha, beta, gamma, absolute}, 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 &&  `${coords.longitude},${coords.latitude}`}
     </div>
    }
  />

export default Example

`withGeoPosition()`

import { withGeoPosition } from 'react-fns'

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

export default withGeoPosition(Inner)

Media

Retrieve media query (i.e. window.matchMedia().matches) from the browser. Note this component is taken from @mjackson's awesome react-media

Media props

query: string: A media query string

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)

WindowSize

WindowSize props

width: Width of browser viewport (window.innerWidth)
height: Height of browser viewport (window.innerHeight)

`<WindowSize render/>`

Returns window.innerWidth and window.innerHeight.

import { WindowSize } from 'react-fns'

const Example = () =>
  <WindowSize
    render={({ width, height }) =>
     <div>Window size: {width}, {height}</div>
    }
  />

export default Example

`withWindowSize()`

Injects window.innerWidth and window.innerHeight as width and height props.

import { withWindowSize } from 'react-fns'

const Inner = ({ width, height }) => <div>Window size: {width}, {height}</div>

export default withWindowSize(Inner)

Locales

Locales props

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

`<Locales render/>`

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

`withLocales()`

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)

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

Roadmap

Useful components

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

Browser API's

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

Author

Jared Palmer @jaredpalmer

Contributors

Thanks goes to these wonderful people (emoji key):

_{MICHAEL JACKSON} 🤔	_{Pavel Prichodko} 💻 📖	_{Richard Powell} 💻	_{Tim Brown} 📖	_{Jack Moore} 💻	_{Dayle Rees} 📖	_{Thomas Flemming} 📖
_{Sam Kvale} 🐛 💻	_{Rhys Powell} 💻	_{Jeppe Reinhold} 📖	_{Macklin Underdown} 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

hyogman/react-fns