A React hook for the Screen Wake Lock API. Can be used to prevent a device's screen from turning off.
This hook uses the native Screen Wake Lock API that was released in Chrome v84. As this is a newly released feature, you may first want to check browser compatibility.
npm install --save use-wake-lock
Toggle wake lock
Checkbox (or similar) that can be toggled to turn wake lock on or off.
import React from "react";import useWakeLock from "use-wake-lock";const Example =const toggleWakeLock wakeLockActive = ;return<input="wakelock"="checkbox"==/><span>wakeLockActive ? "on" : "off"</span>;;
Turn wake lock on and turn it off automatically after Y milliseconds
Button (or similar) that can be clicked to turn wake lock on. After a set period, provided in milliseconds, the wake lock is released.
import React from "react";import useWakeLock from "use-wake-lock";const Example =const toggleWakeLock wakeLockActive = ;return<button =;
The hook provides three values:
toggleWakeLock: A function you can call to toggle the wake lock. It accepts an optional parameter that is the duration (in milliseconds) that the wake lock should be active for.
wakeLockActive: A boolean indicating whether the wake lock is active. The default value is false.
wakeLockError: A string containing any errors when using the Wake Lock API. The most common error is if the browser does not support the API. The default value is an empty string.