useScreenWakeLock

See: Screen Wake Lock API.

Demo

INFO

The component uses useScreenWakeLock hook to detect if WakeLock API is available and renders informations about it. It has a button also, to acquire and release a WakeLock.

Loading demo…

Show source code

import { useScreenWakeLock } from "../../../.."

export const UseScreenWakeLock = () => {
	const [info, acquire, release] = useScreenWakeLock();

	return <>
		<p>WakeLock API supported: {info.isSupported ? "Yes" : "No"}</p>
		<p>WakeLock type: {info.type ? info.type : "WakeLock not found."}</p>
		<p>WakeLock active: {info.isActive ? "Yes" : "No"}</p>
		<button
			type="button"
			onClick={() => {
				info.isActive ? release() : acquire();
			}}
			disabled={!info.isSupported}
		>
			{info.isActive ? "UnLock": "Lock"}
		</button>
	</>
}

Types

UseScreenWakeLockProps

Parameters accepted by useScreenWakeLock.

Property	Type	Required	Description
onRelease	(evt?: Event) => void		Function executed when lock is released.

UseScreenWakeLockInfo

Screen wake lock info object returned as the first element of useScreenWakeLock's tuple.

Property	Type	Required	Description
isSupported	boolean	✓	true when the Screen Wake Lock API is available in the current browser.
type	"screen" \| null	✓	The lock type currently held ("screen"), or null when no lock is active.
isActive	boolean \| null	✓	true when a wake lock is currently active; false when released; null before the first acquire() call.

UseScreenWakeLockResult

Result tuple returned by useScreenWakeLock.

Index	Type	Description
[0]	UseScreenWakeLockInfo	Current wake lock status. See {@link UseScreenWakeLockInfo}.
[1]	() => Promise<void>	acquire — requests a screen wake lock. No-op when already active.
[2]	() => Promise<void>	release — releases the active wake lock. No-op when not active.