usePageVisibility.js
1 import { useEffect, useRef } from 'preact/hooks'; 2 3 export default function usePageVisibility(fn = () => {}, deps = []) { 4 const savedCallback = useRef(fn); 5 useEffect(() => { 6 savedCallback.current = fn; 7 }, [deps]); 8 9 useEffect(() => { 10 const handleVisibilityChange = () => { 11 const hidden = document.hidden || document.visibilityState === 'hidden'; 12 console.log('👀 Page visibility changed', hidden ? 'hidden' : 'visible'); 13 savedCallback.current(!hidden); 14 }; 15 16 document.addEventListener('visibilitychange', handleVisibilityChange); 17 return () => 18 document.removeEventListener('visibilitychange', handleVisibilityChange); 19 }, []); 20 }