https://github.com/lucasmotta/react-accelerometer
Uses the device's Accelerometer as a React Component
https://github.com/lucasmotta/react-accelerometer
accelerometer javascript react react-motion
Last synced: 4 months ago
JSON representation
Uses the device's Accelerometer as a React Component
- Host: GitHub
- URL: https://github.com/lucasmotta/react-accelerometer
- Owner: lucasmotta
- Created: 2017-02-03T12:37:51.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-10T00:23:35.000Z (almost 6 years ago)
- Last Synced: 2025-05-28T03:06:02.569Z (9 months ago)
- Topics: accelerometer, javascript, react, react-motion
- Language: JavaScript
- Homepage: http://react-accelerometer.groselha.xyz
- Size: 57.6 KB
- Stars: 14
- Watchers: 0
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Accelerometer
[](https://travis-ci.org/lucasmotta/react-accelerometer)
Allows you to take advantage of the device's accelerometer on a very easy and uncomplicated way.
## Installation
```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(, document.querySelector('#app'))
```
## 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 - with the "x", "y", "z" properties
* - rotation - with the "alpha", "beta", "gamma"
*/
children: PropTypes.func.isRequired,
/**
* Multiplies the `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](https://github.com/chenglou/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 }) => (
)}
)
render(, document.querySelector('#app'))
```
## Test
```js
npm test
// or
yarnpkg test
```
## License
MIT