useWakeLock

Reactive Screen Wake Lock API. Prevent the screen from dimming or locking.

useWakeLock wraps the Screen Wake Lock API to prevent the device screen from dimming or locking while your application is active. It returns an object with isSupported, isActive (whether a wake lock is currently held), request (acquires the lock when the page is visible, deferred if hidden), forceRequest (acquires regardless of visibility), and release. Callbacks for request, release, and error events can be provided via options.

When to Use

• Keeping the screen awake during video playback, presentations, or recipe displays
• Preventing screen lock during long-running tasks like file uploads or real-time monitoring dashboards
• Building kiosk-mode applications that must keep the display on at all times

Notes

• SSR-safe: Returns isSupported: false and isActive: false with no-op functions during server-side rendering. No navigator.wakeLock access occurs on the server.
• Page visibility: The standard request method defers wake lock acquisition until the page becomes visible. Use forceRequest to bypass this safety check when needed.
• Auto-release: Wake locks are automatically released by the browser when the page becomes hidden (tab switch, minimize). The hook re-acquires the lock when the page becomes visible again if it was active.

Usage

function Demo() {
  const { isSupported, isActive, request, forceRequest, release } = useWakeLock({
    onRequest: () => console.log("Wake lock acquired"),
    onRelease: () => console.log("Wake lock released"),
    onError: (e) => console.error("Wake lock error:", e),
  });

  if (!isSupported) {
    return <div>Wake Lock API is not supported in your browser.</div>;
  }

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        Wake Lock: <b>{isActive ? "Active" : "Inactive"}</b>
      </div>
      <div>
        <button type="button" onClick={request}>
          Request
        </button>
        <button
          type="button"
          onClick={forceRequest}
          style={{ margin: "0 8px" }}
        >
          Force Request
        </button>
        <button type="button" onClick={release}>
          Release
        </button>
      </div>
    </div>
  );
};