All hooks / Browser APIs

useWakeLock

313 B minified and brotliedSourceMarkdown● Newly available: needs recent browser versions

Keeps the screen from dimming or locking while enabled is true, using the Screen Wake Lock API.

The browser releases the lock whenever the tab is hidden; this hook re-acquires it when the tab is visible again. Released on unmount or when disabled. supported and active are false on the server and during hydration. Unsupported browsers or refused requests (e.g. low battery) just leave active as false.

Import

import { useWakeLock } from '@vincent.ri/react-tils'
// or only this hook
import { useWakeLock } from '@vincent.ri/react-tils/useWakeLock'

Usage

const [cooking, setCooking] = useState(false)
const { supported } = useWakeLock(cooking)
return supported ? <Toggle checked={cooking} onChange={setCooking}>Keep screen on</Toggle> : null

Live demo

When to use it

The user reads or follows along without touching the screen, e.g. a recipe, a presentation, a timer, turn-by-turn directions, or a QR code ticket.

When not to

Video is playing; browsers already keep the screen on. Don't enable it for the whole app: it drains the battery. Turn it on for the screen that needs it.

API

function useWakeLock(enabled?: boolean): {
  supported: boolean;
  active: boolean;
}

Returns { supported, active }.