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: 3 months 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-10T18:24:42.000Z (3 months ago)
• Last Synced: 2024-04-10T22:20:22.203Z (3 months ago)
• Topics: react, screen-wake-lock, wakelock
• Language: TypeScript
• Homepage: https://react-screen-wake-lock.vercel.app/
• Size: 1.49 MB
• Stars: 64
• Watchers: 2
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-react-hooks - `react-screen-wake-lock`
• awesome-react-hooks-cn - `react-screen-wake-lock`
• awesome-react-hooks - `react-screen-wake-lock`
• fucking-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 

 · 

Twitter

  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)