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={({ 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.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}, 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 statuscoords?: Position
: Geoposition object. Has keys oflatitude
andlongitude
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.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)
Locales
Locales props
locales
: The current browser locales (navigator.languages
ornavigator.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 addresssubject?: string
: Subject of the emailcc?: string | string[]
: Email address or an array of email addresses to Ccbcc?: 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 numberbody?: 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 ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!