1.0.27 • Published 3 years ago
@ludaalt/react-document-visibility v1.0.27
Реализация npm модуля
React - useDocumentVisibility
Стек: react, typescript, rollup
Реализован react hook, который
- скажет, активна (видна) ли сейчас вкладку браузера
- скажет, сколько раз с момента инициализации компонента вкладка становилась неактивной (невидимой)
- предоставит функцию, в которой можно подписаться на изменение активности (видимости) текущей вкладки
Пример подключения модуля
https://codesandbox.io/s/hungry-architecture-5hbr34
Ссылка на библиотеку
https://www.npmjs.com/package/@ludaalt/react-document-visibility
Пример работы хука
useDocumentVisibility.ts
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 (
<div>
<span>
Вы покинули страницу: {count} раз Вкладка активна? {visible ? 'да' : 'нет'}
</span>
</div>
);
};
1.0.27
3 years ago
1.0.26
3 years ago
1.0.24
3 years ago
1.0.23
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago