Provides React higher order components for DeviceOrientationEvent and DeviceMotionEvent
Your wrapped component gets re-rendered after any deviceorientation or devicemotion event.
npm install -S react-device-events
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 (
<ul>
<li><strong>Supported:</strong> {supported ? "true" : "false"}</li>
<li><strong>Gamma:</strong> {gamma}</li>
<li><strong>Beta:</strong> {beta}</li>
<li><strong>Alpha:</strong> {alpha}</li>
<li><strong>Orientation:</strong> {orientation}</li>
</ul>
)
}
}
export default deviceOrientation(OrientationComponent)
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 (
<ul>
<li><strong>Supported:</strong> {supported ? "true" : "false"}</li>
<li><strong>Acceleration:</strong> {accelerationX} {accelerationY} {accelerationZ}</li>
<li><strong>Acceleration including gravity:</strong> {gravityX} {gravityY} {gravityZ}</li>
<li><strong>Rotation rate:</strong> {alpha} {beta} {gamma}</li>
<li><strong>Interval:</strong> {interval}</li>
</ul>
)
}
}
export default deviceMotion(MotionComponent)
MIT