Edit

API Reference

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 && `${cords.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.pageXOffset)
  • y: Vertical scroll in pixels (window.pageYOffset)

<Scroll render/>

Returns window.pageYOffset and window.pageXOffset.

import { Scroll } from 'react-fns';

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

export default Example;

withScroll()

Injects window.pageYOffset and window.pageXOffset 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
← How it works