useDeviceMotion

Hook that work with device motion

sensors

low

test coverage

Last changed: 7 months ago

TIP

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

Installation

Library

CLI

Manual

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

Usage

const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion(500, (event) => console.log(event));
// or
const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion((event) => console.log(event));
// or
const { interval, rotationRate, acceleration, accelerationIncludingGravity } = useDeviceMotion();

Demo

source

Api

Parameters

Name	Type	Default	Note
delay?	number	1000	The delay in milliseconds
callback?	(event: DeviceMotionEvent) => void	-	The callback function to be invoked

Returns

UseDeviceMotionReturn

Parameters

Name	Type	Default	Note
callback?	(event: DeviceMotionEvent) => void	-	The callback function to be invoked

Returns

UseDeviceMotionReturn

Parameters

Name	Type	Default	Note
options?	UseDeviceMotionOptions	-	Configuration options
options.delay?	number	-	The delay in milliseconds
options.enabled?	boolean	-	Whether to enable the hook
options.onChange?	(event: DeviceMotionEvent) => void	-	The callback function to be invoked

Returns

UseDeviceMotionReturn

Type declaration

export interface UseDeviceMotionReturn {
  acceleration: DeviceMotionEventAcceleration;
  accelerationIncludingGravity: DeviceMotionEventAcceleration;
  interval: DeviceMotionEvent['interval'];
  rotationRate: DeviceMotionEventRotationRate;
}

export interface UseDeviceMotionOptions {
  /** The delay in milliseconds */
  delay?: number;
  /** Whether to enable the hook */
  enabled?: boolean;
  /** The callback function to be invoked */
  onChange?: (event: DeviceMotionEvent) => void;
}

export interface UseDeviceMotion {
  (callback?: (event: DeviceMotionEvent) => void, delay?: number): UseDeviceMotionReturn;

  (options?: UseDeviceMotionOptions): UseDeviceMotionReturn;
}

Source

Source • Demo

Contributors

D

debabin

M

Michael Mironychev