typescriptintermediate

useScreenWakeLock Hook

Prevents the screen from turning off using the Screen Wake Lock API.

typescript
import { useState, useCallback, useEffect, useRef } from 'react';

export function useScreenWakeLock() {
  const [isActive, setIsActive] = useState(false);
  const wakeLockRef = useRef<WakeLockSentinel | null>(null);

  const request = useCallback(async () => {
    try {
      wakeLockRef.current = await navigator.wakeLock.request('screen');
      setIsActive(true);
      wakeLockRef.current.onrelease = () => setIsActive(false);
    } catch {
      setIsActive(false);
    }
  }, []);

  const release = useCallback(async () => {
    await wakeLockRef.current?.release();
    wakeLockRef.current = null;
    setIsActive(false);
  }, []);

  useEffect(() => {
    const reacquire = () => {
      if (wakeLockRef.current !== null && document.visibilityState === 'visible') {
        request();
      }
    };
    document.addEventListener('visibilitychange', reacquire);
    return () => document.removeEventListener('visibilitychange', reacquire);
  }, [request]);

  return { isActive, request, release };
}

Use Cases

  • Video playback
  • Navigation apps

Tags

Related Snippets

Similar patterns you can reuse in the same workflow.