useScreenOrientation

A React hook that provides real-time access to the device's screen orientation state and control methods via the Screen Orientation API.

Important

The lock() method typically requires the application to be in Full-Screen mode to succeed, and it is primarily supported on mobile devices.

Installation

bash

Description

The useScreenOrientation hook allows you to track changes in the device's orientation (type and angle) and manage orientation locks programmatically. It synchronizes the state with the browser's screen.orientation object and automatically updates whenever device is rotated, making it ideal for games, video players, or immersive mobile experiences.

Return values

NameTypeDescription
anglenumber | nullThe current rotation angle of the screen in degrees (0, 90, 180, or 270).
isSupportedbooleanIndicates if the Screen Orientation API is available in the current browser/device.
lock(orientation: ScreenOrientationLock) => Promise<void>Function to lock the screen to a specific orientation (e.g., 'landscape' or 'portrait').
typeOrientationType | nullThe specific orientation typpe (e.g., 'portrait-primary', 'landscape-secondary').
unlock() => voidFunction to release a previously applied orientation lock.

Demo

This component is loading.

Source code

tsx