Skip to content

jorisre/react-screen-wake-lock

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

πŸŒ— 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. Data on support for the wake-lock feature across the major browsers from caniuse.com

Examples (Demo)

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 } = 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;

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

Author

🌈 Joris · @_jorisre

About

πŸŒ“ 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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published