React-screen-wake-lock NPM

Features

🌐 Follows the W3C Screen Wake Lock API specifications
🪝 Easy to use - Just one react hook useWakeLock
🪶 Lightweight & 0 Dependency - Less than 650b
🔌 Easily integration - It works without additional configuration (React, remix, Next.js...)
🧪 Ready to test - Mocks the Screen Wake Lock with Jest
⚠️ Browser Support - Screen Wake Lock API

Examples (Demo)

Installation

yarn add react-screen-wake-lock

npm i react-screen-wake-lock

Usage

import { useWakeLock } from 'react-screen-wake-lock';

function Component() {
  const { isSupported, released, request, release } = useWakeLock({
    onRequest: () => alert('Screen Wake Lock: requested!'),
    onError: () => alert('An error happened 💥'),
    onRelease: () => alert('Screen Wake Lock: released!'),
  });

  return (
    <div>
      <p>
        Screen Wake Lock API supported: <b>{`${isSupported}`}</b>
        <br />
        Released: <b>{`${released}`}</b>
      </p>
      <button
        type="button"
        onClick={() => (released === false ? release() : request())}
      >
        {released === false ? 'Release' : 'Request'}
      </button>
    </div>
  );
}

export default Component;

Props

Prop	description	default	required
`onRequest`	called on successfully `navigator.wakeLock.request`	`undefined`	false
`onError`	called when caught an error from `navigator.wakeLock.request`	`undefined`	false
`onRelease`	called when wake lock is released	`undefined`	false

Returns

Prop	description	type
`isSupported`	Browser support for the Screen Wake Lock API	boolean
`released`	Once WakeLock is released, `released` become `true` and the value never changes again	boolean	undefined
`request`	Returns a promise which allows control over screen dimming and locking	function
`release`	Returns a promise that is resolved once the sentinel has been successfully released	function