useVisibilityChange

visibilitychange 이벤트가 발생할 때 즉, 브라우저 탭의 콘텐츠가 보여지면 onShow 콜백 함수를 실행하며, 콘텐츠가 숨겨지면 onHide 콜백 함수를 실행하는 커스텀 훅입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

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

typescript

function useVisibilityChange({
  onShow,
  onHide,
}: UseVisibilityChangeProps = {}): void;

Usage

typescript

import { useVisibilityChange } from '@modern-kit/react';

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

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