@volkov190/react-document-visibility
TypeScript icon, indicating that this package has built-in type declarations

1.0.13 • Public • Published

react-document-visibility

react hook, который

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

Пример работы

import { useDocumentVisibility } from "@volkov190/react-document-visibility";

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

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

  useEffect(() => {
    document.title = "" + visible;
  });

  return (
    <div>
      <span>
        Вы покинули страницу: {count} раз Вкладка активна?{" "}
        {visible ? "да" : "нет"}
      </span>
    </div>
  );
};

Установка

npm i @volkov190/react-document-visibility

Ссылка на npm

Readme

Keywords

none

Package Sidebar

Install

npm i @volkov190/react-document-visibility

Weekly Downloads

0

Version

1.0.13

License

ISC

Unpacked Size

4.46 kB

Total Files

6

Last publish

Collaborators

  • volkov190