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-hooks

Usage

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:

1. 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. |

2. toggle(): A function that can be used to start or stop the device orientation detection.

Link

• Window: deviceorientation event

License

This project is licensed under the MIT License - see the LICENSE file for details.