0.5.3 • Published 2 years ago
@100rub/use-document-visibility v0.5.3
use-document-visibility
React hook, which -will tell if the browser tab is active (visible) now -will tell you how many times since the initialization of the component the tab has become inactive (invisible) -will provide a function in which you can subscribe to a change in the activity (visibility) of the current tab
Example
import React from "react";
import useDocumentVisibility from "@100rub/use-document-visibility";
const LeaveTabCounter = () => {
const { count, visible, onVisibilityChange } = useDocumentVisibility();
useEffect(() => {
onVisibilityChange((isVisible) => {
console.log("first handler", isVisible);
});
onVisibilityChange((isVisible) => {
console.log("second handler", isVisible);
});
}, [onVisibilityChange]);
return (
<div>
<span>
You have left the page: {count} times Is the tab active?{" "}
{visible ? "yes" : "no"}
</span>
</div>
);
};
Codesandbox
https://codesandbox.io/s/usedocumentvisibility-y7t4o3
npm library
https://www.npmjs.com/package/@100rub/use-document-visibility