https://github.com/masaok/react-hook-absolute-orientation
Absolution Orientation Sensor Hook for React (returns a quaternion)
https://github.com/masaok/react-hook-absolute-orientation
capstone hook react reactjs
Last synced: about 1 year ago
JSON representation
Absolution Orientation Sensor Hook for React (returns a quaternion)
- Host: GitHub
- URL: https://github.com/masaok/react-hook-absolute-orientation
- Owner: masaok
- License: lgpl-3.0
- Created: 2022-02-27T08:33:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-14T04:46:03.000Z (about 4 years ago)
- Last Synced: 2025-03-26T12:01:44.916Z (about 1 year ago)
- Topics: capstone, hook, react, reactjs
- Language: JavaScript
- Homepage: https://react-hook-absolute-orientation-demo.vercel.app/
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-absolute-orientation
A React hook to access data from the [Absolute Orientation Sensor API](https://developer.mozilla.org/en-US/docs/Web/API/AbsoluteOrientationSensor).
## Installation
Using `npm`:
```sh
npm install --save react-hook-absolute-orientation
```
Using `yarn`:
```sh
yarn add react-hook-absolute-orientation
```
## Usage
```jsx
import React from 'react'
import useAbsoluteOrientationSensor from 'react-hook-absolute-orientation'
const onUpdate = info => {
console.log('NEW INFO: ', info)
}
const ComponentWithGyroscope = () => {
const quaternion = useAbsoluteOrientationSensor(
{ frequency: 3, referenceFrame: 'device' },
onUpdate // named function reference is required
)
return (
Absolute Orientation Sensor Hook Demo
{JSON.stringify(quaternion, null, 2)}
Rounded to 0.01
{quaternion.map((item, index) => {
return {Math.round(100 * item) / 100}
})}
Rounded to 0.1
{quaternion.map((item, index) => {
return {Math.round(10 * item) / 10}
})}
)
}
```
### Using `SensorOptions`
https://w3c.github.io/orientation-sensor/#absoluteorientationsensor-interface
If you want to use this feature, simply provide `useGyroscope` with a `SensorOptions` object:
```jsx
const sensor = useAbsoluteOrientationSensor({
frequency: 10, // cycles per second
referenceFrame: 'device', // or 'screen'
})
```
### Using a callback function
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 onUpdate = data => {
console.log('Here’s some new data from the API: ', data)
}
const sensor = useAbsoluteOrientationSensor({}, onUpdate)
```
## Caveats
Absolute Orientation Sensor API is available only in secure contexts (a.k.a. only using HTTPS).
## Credits
Credit to [Bence A. Tóth](https://github.com/bence-toth) for his original hook code for [Geolocation](https://www.npmjs.com/package/react-hook-geolocation).
## License
LGPL-3.0