1.0.27 • Published 3 years ago

@ludaalt/react-document-visibility v1.0.27

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

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

version

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