Uses the device's Accelerometer as a React Component
npm install react-accelerometerAllows you to take advantage of the device's accelerometer on a very easy and uncomplicated way.
js
npm install --save react-accelerometer
// or
yarn add react-accelerometer
`Usage
js
import React, { Component, PropTypes } from 'react'
import { render } from 'react-dom'
import ReactAccelerometer from 'react-accelerometer'const AwesomeComponent = () => (
{(position, rotation) => (
- x: {position.x}
- y: {position.y}
- z: {position.z}
- rotation alpha: {rotation.alpha}
- rotation beta: {rotation.beta}
- rotation gamma: {rotation.gamma}
)}
)
render(
`Props
js
static propTypes = {
/**
* You have to pass a function as the children and return a valid
* React component. If the device supports the "devicemotion" API,
* this function will receive two arguments:
* - pos x, y and z positions by this amount
* @default 1
*/
multiplier: PropTypes.bool,
/**
* Takes in consideration the gravity or not
* @default true
*/
useGravity: PropTypes.bool,
}
`
React-Accelerometer + React-Motion
I highly recommend you to combine this component with React-Motion to get a smoother transition between the accelerometer's values:
js
import React, { Component, PropTypes } from 'react'
import { render } from 'react-dom'
import ReactAccelerometer from 'react-accelerometer'
import { Motion, spring } from 'react-motion'/ Combining React-Accelerometer with React-Motion /
const ReactAccelerometerMotion = ({ children }) => (
{({ x, y }) => (
{pos => children(pos)}
)}
)
const AwesomeComponent = () => (
{({ x, y }) => (
style={{ transform:
translate3d(${x}px, ${y}px, 0) }}
/>
)}
)render(
`Test
js
npm test
// or
yarnpkg test
``MIT