React Use Wake Lock

Easily integrate Screen Wake Lock API in your app

• Zero-dependencies
• Tiny size (less than 1Kb)
• Typescript support
• Auto reacquiring a wake lock out of the box
• 100% test coverage

Demo

• Live Demo

Installation

npm install react-use-wake-lock --save

or

yarn add react-use-wake-lock

Minimal example

import useWakeLock from "react-use-wake-lock";

function MinimalExampleComponent() {
  const { isSupported, isLocked, request, release } = useWakeLock();

  return (
    <div>
      <h3>Screen Wake Lock API supported: {isSupported ? "Yes" : "No"}</h3>
      <h3>Locked: {`${isLocked ? "Yes" : "No"}`}</h3>
      <button type="button" onClick={() => (isLocked ? release() : request())}>
        {isLocked ? "Release" : "Request"}
      </button>
    </div>
  );
}

useWakeLock API

Params

• onError(error: Error, errorType: "request" | "release") - callback called in case of any error during acuqiring lock or releasing it
• onLock(lock: WakeLockSentinel) - callback for successful acquiring of a lock
• onRelease(lock: WakeLockSentinel) - callback called on releasing the lock

Returns

• isSupported: boolean - is Screen Wake Lock API supported by a browser
• isLocked: boolean - current state of a lock
• request: () => void - request a lock
• release: () => void - release the lock