From 0ccbe36aed10d1aae08527c89a7d5c08ded73844 Mon Sep 17 00:00:00 2001 From: hyesungoh Date: Wed, 30 Sep 2026 11:29:58 +0900 Subject: [PATCH 1/3] feat(usePageVisibilityEffect): add usePageVisibilityEffect and deprecate useVisibilityEvent useVisibilityEvent runs a callback when the value of usePageVisibility would change, but the names do not show that the two are a pair, and it is the only hook with an *Event suffix. Add usePageVisibilityEffect with the same signature and behavior, keep useVisibilityEvent as a deprecated alias of it, and switch useImpressionRef to the new name. --- .changeset/page-visibility-effect.md | 5 ++ .scripts/commands/generateSkill/template.md | 2 +- .../plugin/skills/react-simplikit/SKILL.md | 5 +- .../references/usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../references/useVisibilityEvent.md | 4 ++ .../useImpressionRef/useImpressionRef.ts | 4 +- .../usePageVisibility/usePageVisibility.ts | 2 +- .../es/usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../hooks/usePageVisibilityEffect/index.ts | 1 + .../ja/usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../ko/usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../usePageVisibilityEffect.test.ts} | 19 ++++--- .../usePageVisibilityEffect.ts | 50 +++++++++++++++++ .../zh-Hans/usePageVisibilityEffect.md | 55 +++++++++++++++++++ .../es/useVisibilityEvent.md | 4 ++ .../ja/useVisibilityEvent.md | 4 ++ .../ko/useVisibilityEvent.md | 4 ++ .../useVisibilityEvent/useVisibilityEvent.md | 4 ++ .../useVisibilityEvent/useVisibilityEvent.ts | 27 ++------- .../zh-Hans/useVisibilityEvent.md | 4 ++ packages/react-simplikit/src/index.ts | 1 + 22 files changed, 434 insertions(+), 36 deletions(-) create mode 100644 .changeset/page-visibility-effect.md create mode 100644 packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md rename packages/react-simplikit/src/hooks/{useVisibilityEvent/useVisibilityEvent.spec.ts => usePageVisibilityEffect/usePageVisibilityEffect.test.ts} (67%) create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md diff --git a/.changeset/page-visibility-effect.md b/.changeset/page-visibility-effect.md new file mode 100644 index 00000000..638e4fdc --- /dev/null +++ b/.changeset/page-visibility-effect.md @@ -0,0 +1,5 @@ +--- +'react-simplikit': minor +--- + +Add `usePageVisibilityEffect`, which runs a callback when the page visibility changes and pairs by name with `usePageVisibility`, which returns the same value as state. `useVisibilityEvent` is deprecated in favor of `usePageVisibilityEffect` and still works as before, since it is now the same function under its old name. diff --git a/.scripts/commands/generateSkill/template.md b/.scripts/commands/generateSkill/template.md index b4b1ad5e..1df730f9 100644 --- a/.scripts/commands/generateSkill/template.md +++ b/.scripts/commands/generateSkill/template.md @@ -43,7 +43,7 @@ Backticks in this table mark catalog entries only. | Long press / double click | `useLongPress` / `useDoubleClick` | | Element enters or leaves the viewport | `useIntersectionObserver` | | How long an element stayed visible (impression tracking) | `useImpressionRef` / `ImpressionArea` | -| React to tab / page visibility changes with a callback | `useVisibilityEvent` | +| React to tab / page visibility changes with a callback | `usePageVisibilityEffect` | | Read the current tab / page visibility as state | `usePageVisibility` | | Device location | `useGeolocation` | | Combine multiple refs into one | `mergeRefs` | diff --git a/packages/plugin/skills/react-simplikit/SKILL.md b/packages/plugin/skills/react-simplikit/SKILL.md index a4d6afd5..28292be3 100644 --- a/packages/plugin/skills/react-simplikit/SKILL.md +++ b/packages/plugin/skills/react-simplikit/SKILL.md @@ -43,7 +43,7 @@ Backticks in this table mark catalog entries only. | Long press / double click | `useLongPress` / `useDoubleClick` | | Element enters or leaves the viewport | `useIntersectionObserver` | | How long an element stayed visible (impression tracking) | `useImpressionRef` / `ImpressionArea` | -| React to tab / page visibility changes with a callback | `useVisibilityEvent` | +| React to tab / page visibility changes with a callback | `usePageVisibilityEffect` | | Read the current tab / page visibility as state | `usePageVisibility` | | Device location | `useGeolocation` | | Combine multiple refs into one | `mergeRefs` | @@ -99,6 +99,7 @@ Backticks in this table mark catalog entries only. | [`useNetworkStatus`](references/useNetworkStatus.md) | `useNetworkStatus` is a React hook that provides access to the Network Information API. | | [`useOutsideClickEffect`](references/useOutsideClickEffect.md) | `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s). | | [`usePageVisibility`](references/usePageVisibility.md) | `usePageVisibility` is a React hook that detects page visibility changes. | +| [`usePageVisibilityEffect`](references/usePageVisibilityEffect.md) | `usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. | | [`usePreservedCallback`](references/usePreservedCallback.md) | `usePreservedCallback` is a React hook that maintains a stable reference to a callback function while ensuring it always has access to the latest state or props. | | [`usePreservedReference`](references/usePreservedReference.md) | `usePreservedReference` is a React hook that helps maintain the reference of a value when it hasn't changed, while ensuring you can safely use the latest state. | | [`usePrevious`](references/usePrevious.md) | `usePrevious` is a React hook that returns the previous value of the input state. | @@ -112,7 +113,6 @@ Backticks in this table mark catalog entries only. | [`useThrottledValue`](references/useThrottledValue.md) | `useThrottledValue` is a React hook that returns a throttled copy of the given value. | | [`useTimeout`](references/useTimeout.md) | `useTimeout` is a React hook that executes a callback function after a specified delay. | | [`useToggle`](references/useToggle.md) | `useToggle` is a React hook that simplifies managing a boolean state. | -| [`useVisibilityEvent`](references/useVisibilityEvent.md) | `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. | | [`useVisualViewport`](references/useVisualViewport.md) | `useVisualViewport` is a React hook that tracks Visual Viewport changes. | ### components @@ -147,6 +147,7 @@ These still work but are kept only for backward compatibility. Do not use them i | Name | Notice | | --- | --- | | `useCallbackOncePerRender` | Use `useCallbackOnce` instead. | +| `useVisibilityEvent` | Use `usePageVisibilityEffect` instead. | ## Learn more diff --git a/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md b/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md new file mode 100644 index 00000000..e9c1db2c --- /dev/null +++ b/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +`usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. + +## Interface + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### Parameters + + + + + +### Return Value + +This function does not return anything. + +## Example + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`Document is now ${visibilityState}`); + }); + + return

Check the console for visibility changes.

; +} +``` diff --git a/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md b/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md index 52115cc8..e6836147 100644 --- a/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md +++ b/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning Deprecated +Use `usePageVisibilityEffect` instead. +::: + `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. ## Interface diff --git a/packages/react-simplikit/src/hooks/useImpressionRef/useImpressionRef.ts b/packages/react-simplikit/src/hooks/useImpressionRef/useImpressionRef.ts index c2f634a6..b6f88a74 100644 --- a/packages/react-simplikit/src/hooks/useImpressionRef/useImpressionRef.ts +++ b/packages/react-simplikit/src/hooks/useImpressionRef/useImpressionRef.ts @@ -2,8 +2,8 @@ import { useEffect, useRef } from 'react'; import { useDebouncedCallback } from '../useDebouncedCallback/useDebouncedCallback.ts'; import { useIntersectionObserver } from '../useIntersectionObserver/index.ts'; +import { usePageVisibilityEffect } from '../usePageVisibilityEffect/index.ts'; import { usePreservedCallback } from '../usePreservedCallback/index.ts'; -import { useVisibilityEvent } from '../useVisibilityEvent/index.ts'; export type UseImpressionRefOptions = Partial<{ onImpressionStart: () => void; @@ -96,7 +96,7 @@ export function useImpressionRef({ [impressionEndHandler] ); - useVisibilityEvent(documentVisible => { + usePageVisibilityEffect(documentVisible => { if (!isIntersectingRef.current) { return; } diff --git a/packages/react-simplikit/src/hooks/usePageVisibility/usePageVisibility.ts b/packages/react-simplikit/src/hooks/usePageVisibility/usePageVisibility.ts index bb90e3d0..8e659e9b 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibility/usePageVisibility.ts +++ b/packages/react-simplikit/src/hooks/usePageVisibility/usePageVisibility.ts @@ -24,7 +24,7 @@ export type PageVisibility = { * It monitors when the user switches tabs or minimizes the browser using the Page Visibility API. * Useful for pausing/resuming animations, videos, or background tasks to improve performance and the user experience. * - * @see `useVisibilityEvent` runs a callback on each change instead of returning state. + * @see `usePageVisibilityEffect` runs a callback on each change instead of returning state. * * @returns {PageVisibility} Page visibility information * - isVisible `boolean` - `true` if the page is currently visible to the user diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md new file mode 100644 index 00000000..e19e6598 --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +`usePageVisibilityEffect` es un Hook de React que escucha los cambios en el estado de visibilidad del documento y ejecuta un callback. + +## Interfaz + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### Parámetros + + + + + +### Valor de retorno + +Esta función no devuelve ningún valor. + +## Ejemplo + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`El estado del documento ahora es ${visibilityState}`); + }); + + return

Consulta los cambios de visibilidad en la consola.

; +} +``` diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts new file mode 100644 index 00000000..1b06cebb --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts @@ -0,0 +1 @@ +export { usePageVisibilityEffect } from './usePageVisibilityEffect.ts'; diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md new file mode 100644 index 00000000..0bc059cc --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +`usePageVisibilityEffect` は、ドキュメントの表示状態の変化を監視し、コールバックを呼び出す React フックです。 + +## インターフェース + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### パラメータ + + + + + +### 戻り値 + +この関数は値を返しません。 + +## 使用例 + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`Document is now ${visibilityState}`); + }); + + return

Check the console for visibility changes.

; +} +``` diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md new file mode 100644 index 00000000..5825e363 --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +문서의 가시성 상태 변화를 감지하고 콜백을 실행하는 리액트 훅이에요. + +## 인터페이스 + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### 파라미터 + + + + + +### 반환 값 + +이 함수는 아무것도 반환하지 않아요. + +## 예시 + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`Document is now ${visibilityState}`); + }); + + return

가시성 변화는 콘솔을 확인해 주세요.

; +} +``` diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md new file mode 100644 index 00000000..e9c1db2c --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +`usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. + +## Interface + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### Parameters + + + + + +### Return Value + +This function does not return anything. + +## Example + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`Document is now ${visibilityState}`); + }); + + return

Check the console for visibility changes.

; +} +``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.spec.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts similarity index 67% rename from packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.spec.ts rename to packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts index e2366f40..a2d779ce 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.spec.ts +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts @@ -2,14 +2,15 @@ import { act } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; import { renderHookSSR } from '../../_internal/test-utils/renderHookSSR.tsx'; +import { useVisibilityEvent } from '../useVisibilityEvent/useVisibilityEvent.ts'; -import { useVisibilityEvent } from './useVisibilityEvent.ts'; +import { usePageVisibilityEffect } from './usePageVisibilityEffect.ts'; -describe('useVisibilityEvent', () => { +describe('usePageVisibilityEffect', () => { it('calls the callback when visibility changes', async () => { const mockCallback = vi.fn(); - await renderHookSSR(() => useVisibilityEvent(mockCallback)); + await renderHookSSR(() => usePageVisibilityEffect(mockCallback)); await act(async () => simulateVisibilityChange('hidden')); @@ -22,7 +23,7 @@ describe('useVisibilityEvent', () => { it('is safe on server side rendering', () => { const callback = vi.fn(); - renderHookSSR.serverOnly(() => useVisibilityEvent(callback)); + renderHookSSR.serverOnly(() => usePageVisibilityEffect(callback)); expect(callback).not.toHaveBeenCalled(); }); @@ -30,7 +31,7 @@ describe('useVisibilityEvent', () => { it('should not call the callback on initial render if immediate is false', async () => { const mockCallback = vi.fn(); - await renderHookSSR(() => useVisibilityEvent(mockCallback, { immediate: false })); + await renderHookSSR(() => usePageVisibilityEffect(mockCallback, { immediate: false })); expect(mockCallback).not.toHaveBeenCalled(); }); @@ -40,7 +41,7 @@ describe('useVisibilityEvent', () => { await act(async () => simulateVisibilityChange('visible')); - await renderHookSSR(() => useVisibilityEvent(mockCallback, { immediate: true })); + await renderHookSSR(() => usePageVisibilityEffect(mockCallback, { immediate: true })); expect(mockCallback).toHaveBeenCalledWith('visible'); }); @@ -48,7 +49,7 @@ describe('useVisibilityEvent', () => { it('should remove the event listener on unmount', async () => { const mockCallback = vi.fn(); - const { unmount } = await renderHookSSR(() => useVisibilityEvent(mockCallback)); + const { unmount } = await renderHookSSR(() => usePageVisibilityEffect(mockCallback)); unmount(); @@ -56,6 +57,10 @@ describe('useVisibilityEvent', () => { expect(mockCallback).not.toHaveBeenCalled(); }); + + it('keeps the deprecated useVisibilityEvent as the same function', () => { + expect(useVisibilityEvent).toBe(usePageVisibilityEffect); + }); }); function simulateVisibilityChange(visibilityState: 'visible' | 'hidden') { diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts new file mode 100644 index 00000000..1d25a2f5 --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts @@ -0,0 +1,50 @@ +import { useCallback, useEffect } from 'react'; + +type Options = { + immediate?: boolean; +}; + +/** + * @description + * `usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. + * + * @see `usePageVisibility` returns the visibility as state instead of running a callback. + * + * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called + * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument. + * @param {object} [options] - Optional configuration for the hook. + * @param {boolean} [options.immediate=false] - If true, the callback is invoked immediately upon mounting + * with the current visibility state. + * + * @example + * import { usePageVisibilityEffect } from 'react-simplikit'; + * + * function Component() { + * usePageVisibilityEffect(visibilityState => { + * console.log(`Document is now ${visibilityState}`); + * }); + * + * return

Check the console for visibility changes.

; + * } + */ + +export function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options: Options = {} +) { + const handleVisibilityChange = useCallback(() => { + callback(document.visibilityState); + }, [callback]); + + useEffect(() => { + if (options?.immediate ?? false) { + handleVisibilityChange(); + } + + document.addEventListener('visibilitychange', handleVisibilityChange); + + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange); + }; + }, [handleVisibilityChange, options?.immediate]); +} diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md new file mode 100644 index 00000000..bb8e333e --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md @@ -0,0 +1,55 @@ +# usePageVisibilityEffect + +`usePageVisibilityEffect` 是一个监听文档可见性状态变化并触发回调的 React Hook。 + +## 接口 + +```ts +function usePageVisibilityEffect( + callback: (visibilityState: 'visible' | 'hidden') => void, + options?: object +): void; +``` + +### 参数 + + + + + +### 返回值 + +此函数不返回任何内容。 + +## 示例 + +```tsx +import { usePageVisibilityEffect } from 'react-simplikit'; + +function Component() { + usePageVisibilityEffect(visibilityState => { + console.log(`Document is now ${visibilityState}`); + }); + + return

Check the console for visibility changes.

; +} +``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md index 9dfb4e80..9589323a 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning Obsoleto +Usa `usePageVisibilityEffect` en su lugar. +::: + `useVisibilityEvent` es un Hook de React que escucha los cambios en el estado de visibilidad del documento y ejecuta un callback. ## Interfaz diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md index 4cf5116c..0096e9c9 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning 非推奨 +代わりに `usePageVisibilityEffect` を使用してください。 +::: + `useVisibilityEvent` は、ドキュメントの表示状態の変化を監視し、コールバックを呼び出す React フックです。 ## インターフェース diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md index c6c13f34..eb8b4bf6 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning 더 이상 권장하지 않음 +대신 `usePageVisibilityEffect` 훅을 사용하세요. +::: + 문서의 가시성 상태 변화를 감지하고 콜백을 실행하는 리액트 훅이에요. ## 인터페이스 diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md index 52115cc8..e6836147 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning Deprecated +Use `usePageVisibilityEffect` instead. +::: + `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. ## Interface diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts index 66bd33b9..b83fe517 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts @@ -1,10 +1,8 @@ -import { useCallback, useEffect } from 'react'; - -type Options = { - immediate?: boolean; -}; +import { usePageVisibilityEffect } from '../usePageVisibilityEffect/index.ts'; /** + * @deprecated Use `usePageVisibilityEffect` instead. + * * @description * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. * @@ -27,21 +25,4 @@ type Options = { * return

Check the console for visibility changes.

; * } */ - -export function useVisibilityEvent(callback: (visibilityState: 'visible' | 'hidden') => void, options: Options = {}) { - const handleVisibilityChange = useCallback(() => { - callback(document.visibilityState); - }, [callback]); - - useEffect(() => { - if (options?.immediate ?? false) { - handleVisibilityChange(); - } - - document.addEventListener('visibilitychange', handleVisibilityChange); - - return () => { - document.removeEventListener('visibilitychange', handleVisibilityChange); - }; - }, [handleVisibilityChange, options?.immediate]); -} +export const useVisibilityEvent = usePageVisibilityEffect; diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md index fdd5071f..a71bfb26 100644 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md +++ b/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md @@ -1,5 +1,9 @@ # useVisibilityEvent +::: warning 已弃用 +请改用 `usePageVisibilityEffect`。 +::: + `useVisibilityEvent` 是一个监听文档可见性状态变化并触发回调的 React Hook。 ## 接口 diff --git a/packages/react-simplikit/src/index.ts b/packages/react-simplikit/src/index.ts index 99337942..bed77335 100644 --- a/packages/react-simplikit/src/index.ts +++ b/packages/react-simplikit/src/index.ts @@ -33,6 +33,7 @@ export { } from './hooks/useNetworkStatus/index.ts'; export { useOutsideClickEffect } from './hooks/useOutsideClickEffect/index.ts'; export { type PageVisibility, usePageVisibility, type VisibilityState } from './hooks/usePageVisibility/index.ts'; +export { usePageVisibilityEffect } from './hooks/usePageVisibilityEffect/index.ts'; export { usePreservedCallback } from './hooks/usePreservedCallback/index.ts'; export { usePreservedReference } from './hooks/usePreservedReference/index.ts'; export { usePrevious } from './hooks/usePrevious/index.ts'; From 87ebc4b8317d47fbc8c51a57e355ee5a6bf48f1a Mon Sep 17 00:00:00 2001 From: hyesungoh Date: Wed, 7 Oct 2026 16:43:43 +0900 Subject: [PATCH 2/3] docs(usePageVisibilityEffect): note that the deprecation reverses #435 --- .changeset/page-visibility-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/page-visibility-effect.md b/.changeset/page-visibility-effect.md index 638e4fdc..c8094190 100644 --- a/.changeset/page-visibility-effect.md +++ b/.changeset/page-visibility-effect.md @@ -2,4 +2,4 @@ 'react-simplikit': minor --- -Add `usePageVisibilityEffect`, which runs a callback when the page visibility changes and pairs by name with `usePageVisibility`, which returns the same value as state. `useVisibilityEvent` is deprecated in favor of `usePageVisibilityEffect` and still works as before, since it is now the same function under its old name. +Add `usePageVisibilityEffect`, which runs a callback when the page visibility changes and pairs by name with `usePageVisibility`, which returns the same value as state. `useVisibilityEvent` is deprecated in favor of `usePageVisibilityEffect` and still works as before, since it is now the same function under its old name. This reverses the note from #435 that `useVisibilityEvent` is no longer deprecated. It is deprecated again because of the rename, not because it is going away: it keeps working throughout v1 and may be removed in a later major version. From c9e27b9b666f80668bee6525500193fccdb76579 Mon Sep 17 00:00:00 2001 From: hyesungoh Date: Wed, 7 Oct 2026 17:13:28 +0900 Subject: [PATCH 3/3] refactor(usePageVisibilityEffect): drop the documentation page of the deprecated alias useVisibilityEvent moves into the usePageVisibilityEffect folder as a one-line alias, its pages are removed, the usePageVisibilityEffect page says it was renamed, and the old URL redirects to the new page. --- .scripts/verifyDocsI18n.ts | 21 ++++--- .vitepress/libs/legacyRedirects.mts | 2 + .../references/usePageVisibilityEffect.md | 1 + .../references/useVisibilityEvent.md | 59 ------------------- .../es/usePageVisibilityEffect.md | 1 + .../hooks/usePageVisibilityEffect/index.ts | 1 + .../ja/usePageVisibilityEffect.md | 1 + .../ko/usePageVisibilityEffect.md | 2 +- .../usePageVisibilityEffect.md | 1 + .../usePageVisibilityEffect.test.ts | 2 +- .../usePageVisibilityEffect.ts | 1 + .../useVisibilityEvent.ts | 9 +++ .../zh-Hans/usePageVisibilityEffect.md | 2 +- .../es/useVisibilityEvent.md | 59 ------------------- .../src/hooks/useVisibilityEvent/index.ts | 1 - .../ja/useVisibilityEvent.md | 59 ------------------- .../ko/useVisibilityEvent.md | 59 ------------------- .../useVisibilityEvent/useVisibilityEvent.md | 59 ------------------- .../useVisibilityEvent/useVisibilityEvent.ts | 28 --------- .../zh-Hans/useVisibilityEvent.md | 59 ------------------- packages/react-simplikit/src/index.ts | 3 +- 21 files changed, 35 insertions(+), 395 deletions(-) delete mode 100644 packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md create mode 100644 packages/react-simplikit/src/hooks/usePageVisibilityEffect/useVisibilityEvent.ts delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/index.ts delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts delete mode 100644 packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md diff --git a/.scripts/verifyDocsI18n.ts b/.scripts/verifyDocsI18n.ts index 2c47c738..7d5aeae1 100644 --- a/.scripts/verifyDocsI18n.ts +++ b/.scripts/verifyDocsI18n.ts @@ -142,7 +142,7 @@ try { ) ).reduce((total, count) => total + count, 0); const guidePageCount = 11; - const renamedPageRedirectCount = 2; + const renamedPageRedirectCount = 4; assert.equal( stubs.length, @@ -161,6 +161,8 @@ try { 'ja/mobile/utils/isServer.html', 'hooks/useCallbackOncePerRender.html', 'ko/core/hooks/useCallbackOncePerRender.html', + 'hooks/useVisibilityEvent.html', + 'ko/core/hooks/useVisibilityEvent.html', ]) { assert.equal(stubPaths.has(expected), true, `the legacy URL ${expected} must keep a redirect`); } @@ -177,12 +179,17 @@ try { } // A renamed export has no page of its own, so its old URLs must land on the page of its new name. - for (const from of ['hooks/useCallbackOncePerRender.html', 'ja/core/hooks/useCallbackOncePerRender.html']) { - assert.equal( - stubs.find(stub => stub.from === from)?.to, - from.replace('core/', '').replace('useCallbackOncePerRender', 'useCallbackOnce'), - `${from} must redirect to the useCallbackOnce page` - ); + for (const [oldName, newName] of [ + ['useCallbackOncePerRender', 'useCallbackOnce'], + ['useVisibilityEvent', 'usePageVisibilityEffect'], + ]) { + for (const from of [`hooks/${oldName}.html`, `ja/core/hooks/${oldName}.html`]) { + assert.equal( + stubs.find(stub => stub.from === from)?.to, + from.replace('core/', '').replace(oldName, newName), + `${from} must redirect to the ${newName} page` + ); + } } for (const { from, to } of stubs) { diff --git a/.vitepress/libs/legacyRedirects.mts b/.vitepress/libs/legacyRedirects.mts index 122faac7..436e042d 100644 --- a/.vitepress/libs/legacyRedirects.mts +++ b/.vitepress/libs/legacyRedirects.mts @@ -48,6 +48,8 @@ const RETIRED_MOBILE_PAGES = new Set([ const RENAMED_REFERENCE_REDIRECTS: RedirectPair[] = [ { from: 'hooks/useCallbackOncePerRender.html', to: 'hooks/useCallbackOnce.html' }, { from: 'core/hooks/useCallbackOncePerRender.html', to: 'hooks/useCallbackOnce.html' }, + { from: 'hooks/useVisibilityEvent.html', to: 'hooks/usePageVisibilityEffect.html' }, + { from: 'core/hooks/useVisibilityEvent.html', to: 'hooks/usePageVisibilityEffect.html' }, ]; export function collectLegacyRedirects(): RedirectPair[] { diff --git a/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md b/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md index e9c1db2c..24882458 100644 --- a/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md +++ b/packages/plugin/skills/react-simplikit/references/usePageVisibilityEffect.md @@ -1,6 +1,7 @@ # usePageVisibilityEffect `usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. +In v0 this hook was named `useVisibilityEvent`. The old name still works but is deprecated. ## Interface diff --git a/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md b/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md deleted file mode 100644 index e6836147..00000000 --- a/packages/plugin/skills/react-simplikit/references/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning Deprecated -Use `usePageVisibilityEffect` instead. -::: - -`useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. - -## Interface - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### Parameters - - - - - -### Return Value - -This function does not return anything. - -## Example - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`Document is now ${visibilityState}`); - }); - - return

Check the console for visibility changes.

; -} -``` diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md index e19e6598..2f0db457 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/es/usePageVisibilityEffect.md @@ -1,6 +1,7 @@ # usePageVisibilityEffect `usePageVisibilityEffect` es un Hook de React que escucha los cambios en el estado de visibilidad del documento y ejecuta un callback. +En v0 este Hook se llamaba `useVisibilityEvent`. El nombre anterior sigue funcionando, pero está obsoleto. ## Interfaz diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts index 1b06cebb..f1c21631 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/index.ts @@ -1 +1,2 @@ export { usePageVisibilityEffect } from './usePageVisibilityEffect.ts'; +export { useVisibilityEvent } from './useVisibilityEvent.ts'; diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md index 0bc059cc..8ce1a705 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ja/usePageVisibilityEffect.md @@ -1,6 +1,7 @@ # usePageVisibilityEffect `usePageVisibilityEffect` は、ドキュメントの表示状態の変化を監視し、コールバックを呼び出す React フックです。 +v0 では、このフックは `useVisibilityEvent` という名前でした。以前の名前も引き続き動作しますが、非推奨です。 ## インターフェース diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md index 5825e363..438a0001 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/ko/usePageVisibilityEffect.md @@ -1,6 +1,6 @@ # usePageVisibilityEffect -문서의 가시성 상태 변화를 감지하고 콜백을 실행하는 리액트 훅이에요. +문서의 가시성 상태 변화를 감지하고 콜백을 실행하는 리액트 훅이에요. v0에서는 이 훅의 이름이 `useVisibilityEvent`였어요. 이전 이름도 계속 동작하지만 deprecated 상태예요. ## 인터페이스 diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md index e9c1db2c..24882458 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.md @@ -1,6 +1,7 @@ # usePageVisibilityEffect `usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. +In v0 this hook was named `useVisibilityEvent`. The old name still works but is deprecated. ## Interface diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts index a2d779ce..18d64fa8 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.test.ts @@ -2,9 +2,9 @@ import { act } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; import { renderHookSSR } from '../../_internal/test-utils/renderHookSSR.tsx'; -import { useVisibilityEvent } from '../useVisibilityEvent/useVisibilityEvent.ts'; import { usePageVisibilityEffect } from './usePageVisibilityEffect.ts'; +import { useVisibilityEvent } from './useVisibilityEvent.ts'; describe('usePageVisibilityEffect', () => { it('calls the callback when visibility changes', async () => { diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts index 1d25a2f5..b6a5df8a 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/usePageVisibilityEffect.ts @@ -7,6 +7,7 @@ type Options = { /** * @description * `usePageVisibilityEffect` is a React hook that listens to changes in the document's visibility state and triggers a callback. + * In v0 this hook was named `useVisibilityEvent`. The old name still works but is deprecated. * * @see `usePageVisibility` returns the visibility as state instead of running a callback. * diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/useVisibilityEvent.ts b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/useVisibilityEvent.ts new file mode 100644 index 00000000..0bfdb426 --- /dev/null +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/useVisibilityEvent.ts @@ -0,0 +1,9 @@ +import { usePageVisibilityEffect } from './usePageVisibilityEffect.ts'; + +/** + * @description + * `useVisibilityEvent` is the name `usePageVisibilityEffect` had in v0. + * + * @deprecated Use `usePageVisibilityEffect` instead. + */ +export const useVisibilityEvent = usePageVisibilityEffect; diff --git a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md index bb8e333e..012e5ef4 100644 --- a/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md +++ b/packages/react-simplikit/src/hooks/usePageVisibilityEffect/zh-Hans/usePageVisibilityEffect.md @@ -1,6 +1,6 @@ # usePageVisibilityEffect -`usePageVisibilityEffect` 是一个监听文档可见性状态变化并触发回调的 React Hook。 +`usePageVisibilityEffect` 是一个监听文档可见性状态变化并触发回调的 React Hook。在 v0 中，这个 Hook 名为 `useVisibilityEvent`。旧名称仍然可用，但已弃用。 ## 接口 diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md deleted file mode 100644 index 9589323a..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/es/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning Obsoleto -Usa `usePageVisibilityEffect` en su lugar. -::: - -`useVisibilityEvent` es un Hook de React que escucha los cambios en el estado de visibilidad del documento y ejecuta un callback. - -## Interfaz - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### Parámetros - - - - - -### Valor de retorno - -Esta función no devuelve ningún valor. - -## Ejemplo - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`El estado del documento ahora es ${visibilityState}`); - }); - - return

Consulta los cambios de visibilidad en la consola.

; -} -``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/index.ts b/packages/react-simplikit/src/hooks/useVisibilityEvent/index.ts deleted file mode 100644 index 3120d82d..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useVisibilityEvent } from './useVisibilityEvent.ts'; diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md deleted file mode 100644 index 0096e9c9..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/ja/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning 非推奨 -代わりに `usePageVisibilityEffect` を使用してください。 -::: - -`useVisibilityEvent` は、ドキュメントの表示状態の変化を監視し、コールバックを呼び出す React フックです。 - -## インターフェース - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### パラメータ - - - - - -### 戻り値 - -この関数は値を返しません。 - -## 使用例 - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`Document is now ${visibilityState}`); - }); - - return

Check the console for visibility changes.

; -} -``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md deleted file mode 100644 index eb8b4bf6..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/ko/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning 더 이상 권장하지 않음 -대신 `usePageVisibilityEffect` 훅을 사용하세요. -::: - -문서의 가시성 상태 변화를 감지하고 콜백을 실행하는 리액트 훅이에요. - -## 인터페이스 - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### 파라미터 - - - - - -### 반환 값 - -이 함수는 아무것도 반환하지 않아요. - -## 예시 - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`Document is now ${visibilityState}`); - }); - - return

가시성 변화는 콘솔을 확인해 주세요.

; -} -``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md deleted file mode 100644 index e6836147..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning Deprecated -Use `usePageVisibilityEffect` instead. -::: - -`useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. - -## Interface - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### Parameters - - - - - -### Return Value - -This function does not return anything. - -## Example - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`Document is now ${visibilityState}`); - }); - - return

Check the console for visibility changes.

; -} -``` diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts b/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts deleted file mode 100644 index b83fe517..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/useVisibilityEvent.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { usePageVisibilityEffect } from '../usePageVisibilityEffect/index.ts'; - -/** - * @deprecated Use `usePageVisibilityEffect` instead. - * - * @description - * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback. - * - * @see `usePageVisibility` returns the visibility as state instead of running a callback. - * - * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called - * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument. - * @param {object} [options] - Optional configuration for the hook. - * @param {boolean} [options.immediate=false] - If true, the callback is invoked immediately upon mounting - * with the current visibility state. - * - * @example - * import { useVisibilityEvent } from 'react-simplikit'; - * - * function Component() { - * useVisibilityEvent(visibilityState => { - * console.log(`Document is now ${visibilityState}`); - * }); - * - * return

Check the console for visibility changes.

; - * } - */ -export const useVisibilityEvent = usePageVisibilityEffect; diff --git a/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md b/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md deleted file mode 100644 index a71bfb26..00000000 --- a/packages/react-simplikit/src/hooks/useVisibilityEvent/zh-Hans/useVisibilityEvent.md +++ /dev/null @@ -1,59 +0,0 @@ -# useVisibilityEvent - -::: warning 已弃用 -请改用 `usePageVisibilityEffect`。 -::: - -`useVisibilityEvent` 是一个监听文档可见性状态变化并触发回调的 React Hook。 - -## 接口 - -```ts -function useVisibilityEvent( - callback: (visibilityState: 'visible' | 'hidden') => void, - options?: object -): void; -``` - -### 参数 - - - - - -### 返回值 - -此函数不返回任何内容。 - -## 示例 - -```tsx -import { useVisibilityEvent } from 'react-simplikit'; - -function Component() { - useVisibilityEvent(visibilityState => { - console.log(`Document is now ${visibilityState}`); - }); - - return

Check the console for visibility changes.

; -} -``` diff --git a/packages/react-simplikit/src/index.ts b/packages/react-simplikit/src/index.ts index bed77335..ea9ff934 100644 --- a/packages/react-simplikit/src/index.ts +++ b/packages/react-simplikit/src/index.ts @@ -33,7 +33,7 @@ export { } from './hooks/useNetworkStatus/index.ts'; export { useOutsideClickEffect } from './hooks/useOutsideClickEffect/index.ts'; export { type PageVisibility, usePageVisibility, type VisibilityState } from './hooks/usePageVisibility/index.ts'; -export { usePageVisibilityEffect } from './hooks/usePageVisibilityEffect/index.ts'; +export { usePageVisibilityEffect, useVisibilityEvent } from './hooks/usePageVisibilityEffect/index.ts'; export { usePreservedCallback } from './hooks/usePreservedCallback/index.ts'; export { usePreservedReference } from './hooks/usePreservedReference/index.ts'; export { usePrevious } from './hooks/usePrevious/index.ts'; @@ -47,7 +47,6 @@ export { useThrottledCallback } from './hooks/useThrottledCallback/index.ts'; export { useThrottledValue } from './hooks/useThrottledValue/index.ts'; export { useTimeout } from './hooks/useTimeout/index.ts'; export { useToggle } from './hooks/useToggle/index.ts'; -export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.ts'; export { useVisualViewport } from './hooks/useVisualViewport/index.ts'; export { buildContext } from './utils/buildContext/index.ts'; export { disableBodyScrollLock } from './utils/disableBodyScrollLock/index.ts';