React-Accelerometer
Allows you to take advantage of the device's accelerometer on a very easy and uncomplicated way.
Installation
npm install --save react-accelerometer// oryarn add react-accelerometer
Usage
const AwesomeComponent = <ReactAccelerometer> <ul> <li>x: positionx</li> <li>y: positiony</li> <li>z: positionz</li> <li>rotation alpha: rotationalpha</li> <li>rotation beta: rotationbeta</li> <li>rotation gamma: rotationgamma</li> </ul> </ReactAccelerometer>
Props
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 <Object> - with the "x", "y", "z" properties * - rotation <Object> - with the "alpha", "beta", "gamma" */ children: PropTypesfuncisRequired /** * Multiplies the `x`, `y` and `z` positions by this amount * @default 1 */ multiplier: PropTypesbool /** * Takes in consideration the gravity or not * @default true */ useGravity: PropTypesbool
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:
/* Combining React-Accelerometer with React-Motion */const ReactAccelerometerMotion = <ReactAccelerometer> <Motion style= x: y: > </Motion> </ReactAccelerometer> const AwesomeComponent = <ReactAccelerometerMotion> <img src='image.jpg' style= transform: `translate3d(px, px, 0)` /> </ReactAccelerometerMotion>
Test
npm test// oryarnpkg test
License
MIT