Installation

pnpm dlx uselab@latest add use-wake-lock

Usage

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>
  )
}

API Reference

useWakeLock(options?)

Parameters

Return value

The hook returns an object { isSupported, isActive, error, request, release }:

Options

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".

Notes

• Wake locks are ideal for kiosk flows, route navigation, scanning, or long-form reading interfaces.
• Browsers can still release a wake lock for platform reasons such as battery saver or OS policy, so treat isActive as live state instead of assuming the request persists forever.
• Keep a fallback UX for unsupported browsers because this API is not universally available.