react-device-events

> Provides React higher order components for DeviceOrientationEvent and DeviceMotionEvent

Your wrapped component gets re-rendered after any deviceorientation or devicemotion event.

Installation

npm install -S react-device-events

Usage

$3

``
import React from 'react'
import { deviceOrientation } from 'react-device-events'

class OrientationComponent extends React.Component {
render() {
const { supported, gamma, beta, alpha, orientation} = this.props.deviceOrientation
return (


• Supported: {supported ? "true" : "false"}


• Gamma: {gamma}


• Beta: {beta}


• Alpha: {alpha}


• Orientation: {orientation}

export default deviceOrientation(OrientationComponent)
`

$3

`
import React from 'react'
import { deviceMotion } from 'react-device-events'

class MotionComponent extends React.Component {
render() {
const { supported, acceleration, accelerationIncludingGravity, rotationRate, interval } = this.props.deviceMotion
const [accelerationX, accelerationY, accelerationZ] = acceleration || []
const [gravityX, gravityY, gravityZ] = accelerationIncludingGravity || []
const [alpha, beta, gamma] = rotationRate || []
return (


• Supported: {supported ? "true" : "false"}


• Acceleration: {accelerationX} {accelerationY} {accelerationZ}


• Acceleration including gravity: {gravityX} {gravityY} {gravityZ}


• Rotation rate: {alpha} {beta} {gamma}


• Interval: {interval}

export default deviceMotion(MotionComponent)
``

License

MIT