---
title: "useWakeLock – Browser Hook Usage & Examples"
description: "Reactive Screen Wake Lock API. Prevent the screen from dimming or locking."
canonical: https://reactuse.com/browser/usewakelock/
---

# useWakeLock

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

`useWakeLock` wraps the [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/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

```tsx live
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>
  );
};

```

%%API%%