useDeviceOrientation

See: device orientation.

Demo

INFO

The component uses useDeviceOrientation hook to show device orientation details.

Loading demo…

Show source code

import { useDeviceOrientation } from "../../../.."

export const UseDeviceOrientation = () => {
	const data = useDeviceOrientation();

	return <div style={{ textAlign: "center" }}>
		{
			Object.keys(data).map(key => {
				const value = data[key as keyof typeof data];
				return <p key={key}>{key}: {value !== null ? value.toString(): ""}</p>
			})
		}
	</div>
}

Types

UseDeviceOrientationResult

Reactive snapshot of the device orientation sensor data, returned by useDeviceOrientation. Values are updated whenever the browser fires deviceorientation events.

Property	Type	Required	Description
isSupported	boolean	✓	true when the DeviceOrientationEvent API is supported and permission has been granted.
absolute	boolean \| null	✓	true when the orientation data is provided relative to the Earth's coordinate frame (absolute orientation). false when it is relative to some arbitrary frame. null when the property is not available.
alpha	number \| null	✓	Rotation around the Z axis (compass heading) in degrees in the range [0, 360). null when not available.
beta	number \| null	✓	Rotation around the X axis (front-to-back tilt) in degrees in the range [-180, 180]. Positive values indicate the top of the device is tilted away from the user. null when not available.
gamma	number \| null	✓	Rotation around the Y axis (left-to-right tilt) in degrees in the range [-90, 90]. Positive values indicate the right side of the device is tilted down. null when not available.