# useWakeLock

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

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

## Usage

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

## 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

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

| Parameter | Description |
| --- | --- |
| `enabled` | Keep the screen awake while `true`. Default `true`. |

**Returns** `{ supported, active }`.

## Browser support

Newly available: needs recent browser versions.

- Where the API is missing, `supported` is `false` and the screen follows the device's normal sleep settings.

---

313 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useWakeLock.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useWakeLock/
Previous: [useFullscreen](https://vincentri.github.io/react-tils/hooks/useFullscreen.md)
Next: [useUserMedia](https://vincentri.github.io/react-tils/hooks/useUserMedia.md)