useScreenWakeLock

A React hook that provides unopinionated access to the Screen Wake Lock API to prevent devices from dimming or locking the screen.

Caution

The browser will automatically release the wake lock if the page is minimized, the user switches tabs, or the screen turns off due to system-level power management.

Important

Requires a Secure Context (HTTPS) to operate.

Installation

bash

Description

The useScreenWakeLock hook allows web applications to request a "wake lock," ensuring the screen stays turned on during long-running tasks, such as following a recipe, reading an e-book, or watching a presentation. It manages the WakeLockSentinel lifecycle and provides reactive state to track whether the lock is currently active.

Return values

NameTypeDescription
isActivebooleanIndicates whether the screen wake lock is currently active and the screen is prevented from sleeping.
isSupportedbooleanIndicates if the Screen Wake Lock API is available in the current browser/device.
release() => Promise<void>An asynchronous function to manually release the wake lock and allow the screen to sleep again.
request() => Promise<void>An asynchronous function to request a new screen wake lock.

Demo

This component is loading.

Source code

tsx