use-wake-lock
v1.1.0
Published
A React hook for the Screen Wake Lock API that prevents the device's screen from turning off
Downloads
21
Readme
useWakeLock
A React hook for the Screen Wake Lock API. Can be used to prevent a device's screen from turning off.
Install
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
Usage
An example page is available here. The source code for the example can be found here.
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 } = useWakeLock();
return (
<input
name="wakelock"
type="checkbox"
checked={wakeLockActive}
onChange={() => toggleWakeLock()}
/>
<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 } = useWakeLock();
return (
<button onClick={() => toggleWakeLock(300000)>Keep screen on for 5 minutes</button>
<span>{wakeLockActive ? " on" : " off"}</span>
);
};
API
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.
License
MIT.