1.1.0 • Published 1 year ago
use-device-orientation-hooks v1.1.0
use-device-orientation-hooks
Overview
A React hook to obtain device orientation using DeviceOrientationEvent.
Notes
Installation
You can install this library using npm:
npm install use-device-orientation-hooksUsage
import { useDeviceOrientation } from "use-device-orientation-hooks";
function App() {
const [deviceOrientation, toggle] = useDeviceOrientation();
return (
<div>
<p>Absolute: {deviceOrientation.absolute}</p>
<p>Alpha: {deviceOrientation.alpha}</p>
<p>Beta: {deviceOrientation.beta}</p>
<p>Gamma: {deviceOrientation.gamma}</p>
<p>Webkit Compass Heading: {deviceOrientation.webkitCompassHeading}</p>
<p>Webkit Compass Accuracy: {deviceOrientation.webkitCompassAccuracy}</p>
<button onClick={toggle}>Toggle Orientation Detection</button>
</div>
);
}API
useDeviceOrientation()
A React hook that returns an array with two elements:
deviceOrientation: An object that represents the current device orientation. It has the following properties:
| Property | Type | Description |
|---|---|---|
absolute | Boolean | Indicates whether the device is providing absolute orientation data. |
alpha | Number | The rotation of the device around the Z axis, representing a clockwise angle in degrees. |
beta | Number | The rotation of the device around the X axis, representing a forward or backward motion of the device in degrees. |
gamma | Number | The rotation of the device around the Y axis, representing a left or right motion of the device in degrees. |
webkitCompassHeading | Number | null | The direction that the device is facing according to the compass, in degrees. |
webkitCompassAccuracy | Number | null | The accuracy of the compass heading in degrees. |
toggle(): A function that can be used to start or stop the device orientation detection.
Link
License
This project is licensed under the MIT License - see the LICENSE file for details.