Реализация npm модуля


React - useDocumentVisibility

Стек: react, typescript, rollup

Реализован react hook, который

- скажет, активна (видна) ли сейчас вкладку браузера
- скажет, сколько раз с момента инициализации компонента вкладка становилась неактивной (невидимой)
- предоставит функцию, в которой можно подписаться на изменение активности (видимости) текущей вкладки

$3

https://codesandbox.io/s/hungry-architecture-5hbr34

$3

https://www.npmjs.com/package/@ludaalt/react-document-visibility

$3

useDocumentVisibility.ts

``jsx
import React from 'react';
import { useDocumentVisibility } from '@ludaalt/react-document-visibility';

const LeaveTabCounter = () => {
const { count, visible, onVisibilityChange } = useDocumentVisibility();

useEffect(() => {
onVisibilityChange((isVisible) => {
console.log('first handler', isVisible);
});
onVisibilityChange((isVisible) => {
console.log('second handler', isVisible);
});
}, []);

return (

Вы покинули страницу: {count} раз Вкладка активна? {visible ? 'да' : 'нет'}

);
};
``