useDeviceOrientation

The useDeviceOrientation hook monitors the orientation of the user's device around the X (beta), Y (gamma), and Z (alpha) axes and provides real-time values for this data.

Note: Device orientation data relies on the DeviceOrientationEvent API (opens in a new tab), which is only available on mobile devices and via secured connections (HTTPS). If the API is not available, the hook will return null for all values.

Usage

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useDeviceOrientation into your component.

import { useDeviceOrientation } from '@ridgehkr/useful'

Example

A simple usage example of how to capture and display device orientation data:

import useDeviceOrientation, { DeviceOrientationData } from '@ridgehkr/useful'
 
function DeviceOrientation() {
  const { alpha, beta, gamma }: DeviceOrientationData = useDeviceOrientation()
 
  return (
    <div>
      <h1>Device Orientation Data</h1>
      <p>Alpha: {alpha}</p>
      <p>Beta: {beta}</p>
      <p>Gamma: {gamma}</p>
    </div>
  )
}

API Reference

Hook Signature

useDeviceOrientation(): DeviceOrientationData

Parameters

useDeviceOrientation does not accept any parameters.

Return Value

The hook returns an object with the following properties: