Provides React HoCs for DeviceOrientation & DeviceMotion events
npm install react-device-events> 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 (
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 (
export default deviceMotion(MotionComponent)
``
MIT