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.

$3

- Basic
- Demo example

Installation

``sh
yarn add react-screen-wake-lock
`

or

`sh
npm i react-screen-wake-lock
`

Usage

`tsx
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!'),
reacquireOnPageVisible: true,
});

return (


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 |
| reacquireOnPageVisible | Reacquires the wake lock when the page becomes visible again | false | false |

$3

| 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