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)

• Basic
• Demo example

Installation

yarn add react-screen-wake-lock

or

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 |

Testing

To write tests with ease, follow this guide

Author

🌈 Joris · @_jorisre