Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-screen-wake-lock

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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.

  • 3.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.6K
decreased by-36.62%
Maintainers
1
Weekly downloads
 
Created
Source

🌗 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

Propdescriptiondefaultrequired
onRequestcalled on successfully navigator.wakeLock.requestundefinedfalse
onErrorcalled when caught an error from navigator.wakeLock.requestundefinedfalse
onReleasecalled when wake lock is releasedundefinedfalse

Returns

Propdescriptiontype
isSupportedBrowser support for the Screen Wake Lock APIboolean
releasedOnce WakeLock is released, released become true and the value never changes againbooleanundefined
requestReturns a promise which allows control over screen dimming and lockingfunction
releaseReturns a promise that is resolved once the sentinel has been successfully releasedfunction

Testing

To write tests with ease, follow this guide

Author

🌈 Joris · @_jorisre

Keywords

FAQs

Package last updated on 28 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc