useOrientation

Manage and respond to changes in device orientation with useOrientation.

Install:

npm i @uidotdev/usehooks

Description:

The useOrientation React Hook simplifies the management of a device’s orientation within a React application. It wraps the complexity of listening for, handling, and cleaning up after orientation changes into a reusable hook. By abstracting this logic, the hook allows you to easily track device orientation, resulting in cleaner and more readable code. It adapts to both the Screen Orientation API and the deprecated window.orientation property, providing flexibility across different browser capabilities.

Parameters

This hook doesn’t accept any parameters.

Return Value

NameTypeDescription
anglenumberThe current orientation angle of the device in degrees.
typestringThe current orientation type of the device (e.g., ‘portrait-primary’, ‘landscape-primary’, ‘portrait-secondary’, ‘landscape-secondary’). If the type cannot be determined, it is ‘UNKNOWN’.

Demo:

Example:

More Hooks:

Sort: