Last active
April 21, 2024 08:02
-
-
Save AnishLushte07/4d436dac2fac1ed6f9cae8a6a88eeb68 to your computer and use it in GitHub Desktop.
ReactJS custom hook for page visibility change. Track tabs and window switch.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* This react hook tracks page visibility using browser page visibility api. | |
* Reference: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API | |
* | |
* Use: const pageVisibilityStatus = usePageVisibility(); | |
* Return type: boolean | |
*/ | |
import { useState, useEffect } from 'react'; | |
let hidden, visibilityChange; | |
if (typeof document.hidden !== 'undefined') { | |
hidden = 'hidden'; | |
visibilityChange = 'visibilitychange'; | |
} else if (typeof document.msHidden !== 'undefined') { | |
hidden = 'msHidden'; | |
visibilityChange = 'msvisibilitychange'; | |
} else if (typeof document.webkitHidden !== 'undefined') { | |
hidden = 'webkitHidden'; | |
visibilityChange = 'webkitvisibilitychange'; | |
} | |
export default function usePageVisibility() { | |
const [visibilityStatus, setVisibilityStatus] = React.useState(document[hidden]); | |
React.useEffect(() => { | |
function handleVisibilityChange() { | |
setVisibilityStatus(document[hidden]); | |
} | |
document.addEventListener(visibilityChange, handleVisibilityChange); | |
return () => { | |
document.removeEventListener(visibilityChange, handleVisibilityChange); | |
} | |
}, []); | |
return visibilityStatus; | |
} |
setVisibilityStatus(document[hidden]);
should be
setVisibilityStatus(!document[hidden]);
I have a question. Why do not use document.visibilityState
?
Is it because of cross-browser compatibility?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For Nextjs 13: