Tiniest React implementation of the Screen Wake Lock API.
It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

Demo · Documentation · Twitter Created by Joris

Features

• Follows the W3C Screen Wake Lock API specifications
• Easy to use - just one react hook useWakeLock
• Lightweight - less than 370b
• Easily integration - it works without additional configuration (React, remix, Next.js...)
• Browser Support - Screen Wake Lock API

react-screen-wake-lock use native Screen Wake Lock API under the hood which is not supported by all browsers.

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

Returns

Testing

To write tests with ease, follow this guide

Author

Joris · @_jorisre