useDeviceOrientation

Hook that provides the current device orientation

sensors

low

test coverage

Last changed: 8 months ago

TIP

This hook uses DeviceOrientationEvent browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useDeviceOrientation } from '@siberiacancode/reactuse';

Usage

const { supported, value } = useDeviceOrientation();

Demo

source

Api

Returns

UseDeviceOrientationReturn

Type declaration

export interface UseDeviceOrientationValue {
  /** The current absolute value */
  absolute: boolean;
  /** A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360 */
  alpha: number | null;
  /** A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180 */
  beta: number | null;
  /** A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90 */
  gamma: number | null;
}

export interface UseDeviceOrientationReturn {
  /** Whether the device orientation is supported */
  supported: boolean;
  /** The current device orientation value */
  value: UseDeviceOrientationValue;
}

Source

Source • Demo

Contributors

D

debabin

B

babin