useVisibilityChange

A custom hook that fires the onShow callback function when the visibilitychange event occurs, that is, when the content of the browser tab is visible, and the onHide callback function when the content is hidden.

Interface

type VisibilityChangeCallbackAction = (
  event: Event,
  visibilityState: DocumentVisibilityState
) => void;

interface useVisibilityChangeProps {
  onShow?: VisibilityChangeCallbackAction;
  onHide?: VisibilityChangeCallbackAction;
}

const useVisibilityChange: ({ onShow, onHide, }: useVisibilityChangeProps) => void

Usage

import { useVisibilityChange } from '@devgrace/react';

const Example = () => {
  useVisibilityEvent({
    onShow: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */},
    onHide: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */}
  });

  return (
    <div>{/* ... */}</div>
  )
};