Skip to content

dlitsman/react-use-wake-lock

Repository files navigation

npm Build Status Coverage Status gzip size

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

Installation

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

or

yarn add react-use-wake-lock
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