useVisibilityChange

문서의 가시성(visibility) 상태 변경 시 실행할 콜백 함수를 등록하는 커스텀 훅입니다.

document.visibilityState가 문서가 보이는 상태가 되면(visible) onShow 콜백이 호출되며, 보이지 않는 상태가 되면(hidden) onHide 콜백이 호출됩니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

interface useVisibilityChangeProps {
  onShow?: VisibilityChangeCallbackAction;
  onHide?: VisibilityChangeCallbackAction;
  enabled?: boolean; // default: true
}

typescript

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

Options

Name	Type	Default	Description
onShow	VisibilityChangeCallbackAction	-	문서가 보이는 상태(visible)가 됐을 때 호출되는 콜백
onHide	VisibilityChangeCallbackAction	-	문서가 숨겨진 상태(hidden)가 됐을 때 호출되는 콜백
enabled	boolean	true	가시성 변경 감지 활성화 여부

Usage

typescript

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

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

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

Example

탭을 벗어난 후 다시 돌아와보세요!