react-hook-gyroscope

A React hook to access data from the Gyroscope API.

Installation

Using npm:

``sh
npm install --save react-hook-gyroscope
`

Using yarn:

`sh
yarn add react-hook-gyroscope
`

Usage

`jsx
import React from 'react'
import useGyroscope from 'react-hook-gyroscope'

const ComponentWithGyroscope = () => {
const gyroscope = useGyroscope()

return !gyroscope.error ? (


• X: {gyroscope.x}


• Y: {gyroscope.y}


• Z: {gyroscope.z}

) : (

No gyroscope, sorry.

)
}
`

$3

https://w3c.github.io/gyroscope/#gyroscope-interface

If you want to use this feature, simply provide useGyroscope with a SensorOptions object:

`jsx
const gyroscope = useGyroscope({
frequency: 60, // cycles per second
})
`

$3

You can supply a second parameter to useGyroscope which will be called every time the data from the Gyroscope API is updated. This callback function is then called with the gyroscope object with all its properties.

If you don't use SensorOptions, supply {} as your first argument.

`jsx
const onGyroscopeUpdate = (gyroscope) => {
console.log('Here’s some new data from the Gyroscope API: ', gyroscope)
}

const gyroscope = useGyroscope({}, onGyroscopeUpdate)
``

Notes

Access to data from the Gyroscope API needs user permission.

If permission to access gyroscope was previously granted by the user, gyroscope data will be available. If permission to access was not granted previously, the user will be prompted to give permission when the component mounts.

Caveats

Gyroscope API is available only in secure contexts (a.k.a. only using HTTPS).

Credits

Credit to Bence A. Tóth for his original hook code for Geolocation.

License

LGPL-3.0