useScreenWakeLock

Prevent the device screen from dimming or locking during critical interactions.

Wake Lock API not supported

Requires a secure context (HTTPS) and a modern browser (Chrome, Edge, Safari 16.4+).

Usage

import { useScreenWakeLock } from 'usehooks-ts'
 
export default function PresentationMode() {
  const { isSupported, request, release } = useScreenWakeLock()
 
  return (
    <div>
      {!isSupported && <p>Wake Lock not supported</p>}
      <button onClick={request}>Keep Screen Awake</button>
      <button onClick={release}>Allow Dimming</button>
    </div>
  )
}

API

const { isSupported, released, request, release } = useScreenWakeLock()

Return Values

Name	Type	Description
`isSupported`	`boolean`	`true` if browser supports Wake Lock API
`released`	`boolean \| null`	`true` if the lock has been released
`request`	`() => Promise`	Request a new wake lock
`release`	`() => Promise`	Release the existing wake lock

Hook

import { useCallback, useEffect, useRef, useState } from 'react'
 
export function useScreenWakeLock() {
  const [isSupported, setIsSupported] = useState(false)
  const [released, setReleased] = useState<boolean | null>(null)
  const [sentinel, setSentinel] = useState<any>(null)
 
  useEffect(() => {
    setIsSupported(typeof window !== 'undefined' && 'wakeLock' in navigator)
  }, [])
 
  const request = useCallback(async () => {
    if (!isSupported) return
 
    try {
      // @ts-ignore
      const s = await navigator.wakeLock.request('screen')
      setSentinel(s)
      setReleased(s.released)
 
      s.addEventListener('release', () => {
        setReleased(true)
        setSentinel(null)
      })
    } catch (err) {
      console.error(`${err.name}, ${err.message}`)
    }
  }, [isSupported])
 
  const release = useCallback(async () => {
    if (!sentinel) return
    await sentinel.release()
    setSentinel(null)
  }, [sentinel])
 
  useEffect(() => {
    return () => {
      sentinel?.release()
    }
  }, [sentinel])
 
  return {
    isSupported,
    released,
    request,
    release,
    type: 'screen',
  }
}