🌗 react-screen-wake-lock

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 & 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

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

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, destroy } = useWakeLock({
    onRequest: () => alert('Screen Wake Lock: requested!'),
    onError: () => alert('An error happened 💥'),
    onRelease: () => alert('Screen Wake Lock: released!'),
    onDestroy: () => alert('Screen Wake Lock: destroyed!'),
  });

  return (
    <div>
      <p>
        Screen Wake Lock API supported: <b>{`${isSupported}`}</b>
        <br />
        Released: <b>{`${released}`}</b>
      </p>
      <button type="button" onClick={() => (released === false ? destroy() : 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
onDestroy	called when wake lock is destroyed	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 and creates a visibilitychange event listener to re-aquire the WakeLock if the page loses focus and is then re-acquired	function
release	Returns a promise that is resolved once the sentinel has been successfully released; the sentinel is released but remains active	function
destroy	Returns a promise that is resolved once the sentinel has been successfully released and nullified	function

Testing

To write tests with ease, follow this guide

Author

🌈 Joris · @_jorisre