Sensors

useDeviceMotion

Reactive DeviceMotionEvent. Provides reactive access to device acceleration and rotation rate data.

Demo

Device Motion

Not Supported

Tracks device acceleration and rotation rate via the DeviceMotion API. Best tested on a mobile device.

Accel X

—

Accel Y

—

Accel Z

—

Rotation α

—

Rotation β

—

Rotation γ

—

Interval

0 ms

import { 
const useDeviceMotion: (options?: DeepMaybeObservable<UseDeviceMotionOptions>) => UseDeviceMotionReturn
useDeviceMotion } from "@usels/web";

function 
function MyComponent(): JSX.Element
MyComponent() {
  const { 
const acceleration$: ReadonlyObservable<{
    x: number | null;
    y: number | null;
    z: number | null;
}>
Linear acceleration of the device (without gravity), in m/s²
acceleration$, 
const rotationRate$: ReadonlyObservable<{
    alpha: number | null;
    beta: number | null;
    gamma: number | null;
}>
Rate of rotation of the device around each axis, in deg/s
rotationRate$, 
const interval$: ReadonlyObservable<number>
Interval (in ms) at which the device obtains motion data
interval$, 
const isSupported$: ReadonlyObservable<boolean>
isSupported$ } = 
function useDeviceMotion(options?: DeepMaybeObservable<UseDeviceMotionOptions>): UseDeviceMotionReturn
Framework-agnostic reactive wrapper around the
DeviceMotionEvent.
Resolves the target window via resolveWindowSource (honoring
options.window for iframe / custom root scenarios), exposes acceleration,
rotation rate, and interval as observables, and integrates with the
iOS permission flow via createPermissionAware.
useDeviceMotion();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Supported: {
const isSupported$: ReadonlyObservable<boolean>
isSupported$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Acceleration X: {
const acceleration$: ReadonlyObservable<{
    x: number | null;
    y: number | null;
    z: number | null;
}>
Linear acceleration of the device (without gravity), in m/s²
acceleration$.
ImmutableObservableBase<{ x: number | null; y: number | null; z: number | null; }>.get(trackingType?: TrackingType | GetOptions): {}
get().
any
x}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Rotation Alpha: {
const rotationRate$: ReadonlyObservable<{
    alpha: number | null;
    beta: number | null;
    gamma: number | null;
}>
Rate of rotation of the device around each axis, in deg/s
rotationRate$.
ImmutableObservableBase<{ alpha: number | null; beta: number | null; gamma: number | null; }>.get(trackingType?: TrackingType | GetOptions): {}
get().
any
alpha}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Interval: {
const interval$: ReadonlyObservable<number>
Interval (in ms) at which the device obtains motion data
interval$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()}ms</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createDeviceMotion } from "@usels/web";

function MyComponent() {
  "use scope"
  const { acceleration$, rotationRate$, interval$, isSupported$ } = createDeviceMotion();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Acceleration X: {acceleration$.get().x}</p>
      <p>Rotation Alpha: {rotationRate$.get().alpha}</p>
      <p>Interval: {interval$.get()}ms</p>
    </div>
  );
}

Type

Parameters

Parameter	Type	Description
`options`	`ConfigurableWindow` (optional)	-

Returns

UseDeviceMotionReturn

Name	Type	Description
`hasRealData$`	`ReadonlyObservable<boolean>`	Whether the device has real motion sensor hardware. `isSupported` only checks API availability — desktop browsers expose the API but may fire events with non-zero interval yet all-null values when no hardware exists. `hasRealData$` becomes `true` on the first event where `interval > 0` AND at least one of acceleration or rotationRate has a non-null value.
`acceleration$`	`ReadonlyObservable<{ x: number \| null; y: number \| null; z: number \| null; }>`	Linear acceleration of the device (without gravity), in m/s²
`accelerationIncludingGravity$`	`ReadonlyObservable<{ x: number \| null; y: number \| null; z: number \| null; }>`	Linear acceleration of the device (including gravity), in m/s²
`rotationRate$`	`ReadonlyObservable<{ alpha: number \| null; beta: number \| null; gamma: number \| null; }>`	Rate of rotation of the device around each axis, in deg/s
`interval$`	`ReadonlyObservable<number>`	Interval (in ms) at which the device obtains motion data
`isSupported$`	`ReadonlyObservable<boolean>`	-
`permissionState$`	`ReadonlyObservable<PermissionState>`	Current permission state. `"unsupported"` = API not available in this environment. Never undefined.
`permissionGranted$`	`ReadonlyObservable<boolean>`	`true` only when permissionState$ is `"granted"`
`needsPermission$`	`ReadonlyObservable<boolean>`	`true` when permissionState$ is `"prompt"` or `"denied"`. `"unsupported"` → false.
`ensurePermission`	`() => Promise<void>`	Request permission. No-op if unsupported or already granted. If requestPermission throws, the error is propagated (state unchanged).

Source

View on GitHub