README

Welcome to react-screen-wake-lock 👋

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.

🏠 Homepage

✨ Demo

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.

Data on support for the wake-lock feature across the major browsers from caniuse.com

Install

npm i react-screen-wake-lock
# or
yarn add 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;

Options

Option	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

Name	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
`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

Twitter: @_jorisre
Github: @jorisre

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide and code of conduct.

Show your support

Give a ⭐️ if this project helped you!

📝 License

This README was generated with ❤️ by readme-md-generator

Usage no npm install needed!