Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jorisre/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
https://github.com/jorisre/react-screen-wake-lock
react screen-wake-lock wakelock
Last synced: 30 days ago
JSON representation
๐ 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
- Host: GitHub
- URL: https://github.com/jorisre/react-screen-wake-lock
- Owner: jorisre
- License: mit
- Created: 2020-11-11T23:07:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-11T12:51:08.000Z (about 1 month ago)
- Last Synced: 2024-11-11T13:38:22.772Z (about 1 month ago)
- Topics: react, screen-wake-lock, wakelock
- Language: TypeScript
- Homepage: https://react-screen-wake-lock.vercel.app/
- Size: 1.49 MB
- Stars: 71
- Watchers: 1
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-screen-wake-lock`
- awesome-react-hooks-cn - `react-screen-wake-lock`
- awesome-react-hooks - `react-screen-wake-lock`
- awesome-react-hooks - `react-screen-wake-lock`
README
๐ 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
ยท
Created by Joris## Features
- ๐ Follows the **[W3C Screen Wake Lock API specifications](https://w3c.github.io/screen-wake-lock/)**
- ๐ช **Easy to use** - Just one react hook `useWakeLock`
- ๐ชถ **Lightweight & 0 Dependency** - _Less than **[650b](https://bundlephobia.com/result?p=react-screen-wake-lock)**_
- ๐ **Easily integration** - _It works without additional configuration (React, remix, Next.js...)_
- ๐งช **Ready to test** - Mocks the Screen Wake Lock with [Jest](https://github.com/jorisre/jest-wake-lock-mock#readme)
- โ ๏ธ **Browser Support** - [Screen Wake Lock API](https://caniuse.com/wake-lock)
react-screen-wake-lock
use native Screen Wake Lock API under the hood which is not supported by all browsers.
### Examples (Demo)
- [Basic](https://github.com/jorisre/react-screen-wake-lock#usage)
- [Demo example](https://github.com/jorisre/react-screen-wake-lock/blob/main/example/src/App.tsx)## 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!'),
});return (
Screen Wake Lock API supported: {`${isSupported}`}
Released: {`${released}`}
(released === false ? release() : request())}
>
{released === false ? 'Release' : 'Request'}
);
}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](https://github.com/jorisre/jest-wake-lock-mock#readme)
## Author
**๐ [Joris](https://github.com/jorisre)** ยท [@\_jorisre](https://twitter.com/_jorisre)