useWakeLock – Screen Wake Lock Hook for React

Overview

Manages the Screen Wake Lock API. Automatically re-acquires on tab re-focus and cleans up on unmount. SSR-safe — isSupported will be false on the server.

Usage

import { useWakeLock } from "react-visibility-hooks";

function PresentationMode() {
  const { isActive, isSupported, request, release } = useWakeLock();

  if (!isSupported) return <p>Wake Lock not supported</p>;

  return (
    <div>
      <p>Screen lock: {isActive ? "ON" : "OFF"}</p>
      <button onClick={isActive ? release : request}>
        {isActive ? "Allow screen lock" : "Keep screen on"}
      </button>
    </div>
  );
}

Disable auto-reacquire

// Won't re-request when switching tabs back
const { isActive, request, release } = useWakeLock(false);

API

Parameters

Parameter	Type	Default	Description
autoReacquire	boolean	true	Re-request lock when the tab becomes visible again

Returns (WakeLockResult)

Property	Type	Description
isActive	boolean	true while a Wake Lock is held
request	() => Promise<void>	Request the screen Wake Lock. No-ops if unsupported.
release	() => Promise<void>	Release the current Wake Lock
isSupported	boolean	true when the Screen Wake Lock API is available