useIsDocumentVisible
Tracks document visibility using the document.visibilityState property
The useIsDocumentVisible
hook is helpful when you want to detect a visibility change in the document.
The property returns a boolean value, with true
meaning visible
and false
meaning ‘hidden’, as per the document.visibilityState
property.
useIsDocumentVisible
Tab Away count is : 0
Try changing the tab and check the count valueUsage
Import the hook from @abhushanaj/react-hooks
and use in required component;
import { useCounter, useIsDocumentVisible } from '@abhushanaj/react-hooks';
function App() { const isVisible = useIsDocumentVisible(); const [tabAwayCount, { increment }] = useCounter(0);
React.useEffect(() => { if (!isVisible) { increment(); } }, [isVisible]);
return ( <div> <p>Tab Away count is : {tabAwayCount}</p> <small>Try changing the tab and check the count value</small> </div> );}
export default App;
Properties
- On the server snapshot for the component (when doing SSR), the
isVisible
property returnstrue
by default.
API Reference
Return Value
Parameter | Type | Description | Default |
---|---|---|---|
isVisible | boolean | Whether the document is visible or not. | N/A |