Loading...
Please waitLoading...
Please waitManage the Screen Wake Lock API with simple request and release helpers, plus automatic release and reacquire behavior around tab visibility changes.
pnpm dlx uselab@latest add use-wake-lock
import { useWakeLock } from "@/hooks/use-wake-lock"
export function ReaderMode() {
const { isSupported, isActive, request, release } = useWakeLock()
return (
<div className="space-y-2">
<button
onClick={() => void request()}
disabled={!isSupported || isActive}
>
Keep screen awake
</button>
<button onClick={() => void release()} disabled={!isActive}>
Release
</button>
</div>
)
}useWakeLock(options?)| Name | Type | Description | Optional |
|---|---|---|---|
options | UseWakeLockOptions | Controls automatic release and reacquire behavior. | Yes |
The hook returns an object { isSupported, isActive, error, request, release }:
| Name | Type | Description |
|---|---|---|
isSupported | boolean | Whether the Screen Wake Lock API is available. |
isActive | boolean | Whether a wake lock is currently held. |
error | Error | null | The last request or release error. |
request | () => Promise<boolean> | Requests a wake lock and returns whether it became active. |
release | () => Promise<void> | Releases the current wake lock and clears the desired state. |
interface UseWakeLockOptions {
autoReleaseOnHidden?: boolean
reacquireOnVisible?: boolean
type?: "screen"
}autoReleaseOnHidden: Releases the wake lock when the page becomes hidden. Defaults to true.reacquireOnVisible: Re-requests the wake lock when the page becomes visible again after a hidden transition. Defaults to true.type: Wake lock type to request. The web platform currently supports "screen".isActive as live state instead of assuming the request persists forever.Status
Released
Best use
Kiosks, map navigation, barcode scanning, and recipe readers.
Behavior
Reacquires automatically when the tab becomes visible again.
Browser support is limited, so keep a graceful fallback when the API is unavailable.