@jbpark/use-hooks 2.4.0 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ko.md +20 -16
- package/README.md +20 -16
- package/dist/hooks/index.d.mts +1 -0
- package/dist/hooks/index.mjs +1 -0
- package/dist/hooks/use-intersection-observer.d.mts +5 -0
- package/dist/hooks/use-intersection-observer.mjs +23 -0
- package/dist/hooks/use-intersection-observer.mjs.map +1 -0
- package/dist/index.d.mts +2 -1
- package/dist/index.mjs +2 -1
- package/package.json +1 -1
package/README.ko.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
## 기능
|
|
13
13
|
|
|
14
|
-
- 📦 **
|
|
14
|
+
- 📦 **15개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
|
|
15
15
|
- 🎯 **TypeScript 지원** - 완전한 타입 지원으로 더 나은 개발 경험
|
|
16
16
|
- ⚡ **트리 셰이킹 지원** - 필요한 것만 임포트하세요
|
|
17
17
|
- 🔒 **SSR 안전** - window/document 전역 변수에 대한 보호
|
|
@@ -67,21 +67,23 @@ function MyComponent() {
|
|
|
67
67
|
|
|
68
68
|
## 사용 가능한 훅
|
|
69
69
|
|
|
70
|
-
| 훅
|
|
71
|
-
|
|
|
72
|
-
| `useLocalStorage`
|
|
73
|
-
| `useWindowScroll`
|
|
74
|
-
| `useElementScroll`
|
|
75
|
-
| `useElementPosition`
|
|
76
|
-
| `useResponsiveSize`
|
|
77
|
-
| `useBodyScrollLock`
|
|
78
|
-
| `useClickOutside`
|
|
79
|
-
| `useScrollToElements`
|
|
80
|
-
| `useImage`
|
|
81
|
-
| `useRecursiveTimeout`
|
|
82
|
-
| `useViewport`
|
|
83
|
-
| `useDebounce`
|
|
84
|
-
| `useThrottle`
|
|
70
|
+
| 훅 | 설명 |
|
|
71
|
+
| ------------------------- | ----------------------------------------------------------------- |
|
|
72
|
+
| `useLocalStorage` | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전) |
|
|
73
|
+
| `useWindowScroll` | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응) |
|
|
74
|
+
| `useElementScroll` | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적 |
|
|
75
|
+
| `useElementPosition` | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원) |
|
|
76
|
+
| `useResponsiveSize` | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce) |
|
|
77
|
+
| `useBodyScrollLock` | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리) |
|
|
78
|
+
| `useClickOutside` | 참조한 요소 바깥을 클릭/터치하면 콜백 실행 |
|
|
79
|
+
| `useScrollToElements` | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능) |
|
|
80
|
+
| `useImage` | 이미지 사전로드 및 로딩/에러 상태 노출 |
|
|
81
|
+
| `useRecursiveTimeout` | 비동기/동기 콜백을 재귀적으로 스케줄링 |
|
|
82
|
+
| `useViewport` | visualViewport 지원, 인앱 모드 옵션, debounce 포함 |
|
|
83
|
+
| `useDebounce` | 함수 실행을 지연해 과도한 업데이트를 방지 (autoInvoke 지원) |
|
|
84
|
+
| `useThrottle` | 값 업데이트를 일정 간격으로 제한 |
|
|
85
|
+
| `useHistoryState` | 히스토리 개수 제한을 설정할 수 있는 실행 취소/다시 실행 상태 관리 |
|
|
86
|
+
| `useIntersectionObserver` | 콜백 ref로 요소의 뷰포트 교차 여부 추적 |
|
|
85
87
|
|
|
86
88
|
## 개발
|
|
87
89
|
|
|
@@ -112,7 +114,9 @@ src/
|
|
|
112
114
|
│ ├── use-debounce.ts
|
|
113
115
|
│ ├── use-element-position.ts
|
|
114
116
|
│ ├── use-element-scroll.ts
|
|
117
|
+
│ ├── use-history-state.ts
|
|
115
118
|
│ ├── use-image.ts
|
|
119
|
+
│ ├── use-intersection-observer.ts
|
|
116
120
|
│ ├── use-local-storage.ts
|
|
117
121
|
│ ├── use-recursive-timeout.ts
|
|
118
122
|
│ ├── use-responsive-size.ts
|
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
|
|
|
11
11
|
|
|
12
12
|
## Features
|
|
13
13
|
|
|
14
|
-
- 📦 **
|
|
14
|
+
- 📦 **15 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
|
|
15
15
|
- 🎯 **Full TypeScript Support** - Complete type definitions for better development experience
|
|
16
16
|
- ⚡ **Tree-Shakeable** - Import only what you need
|
|
17
17
|
- 🔒 **SSR-Safe** - Built-in protection for window/document globals
|
|
@@ -67,21 +67,23 @@ function MyComponent() {
|
|
|
67
67
|
|
|
68
68
|
## Available Hooks
|
|
69
69
|
|
|
70
|
-
| Hook
|
|
71
|
-
|
|
|
72
|
-
| `useLocalStorage`
|
|
73
|
-
| `useWindowScroll`
|
|
74
|
-
| `useElementScroll`
|
|
75
|
-
| `useElementPosition`
|
|
76
|
-
| `useResponsiveSize`
|
|
77
|
-
| `useBodyScrollLock`
|
|
78
|
-
| `useClickOutside`
|
|
79
|
-
| `useScrollToElements`
|
|
80
|
-
| `useImage`
|
|
81
|
-
| `useRecursiveTimeout`
|
|
82
|
-
| `useViewport`
|
|
83
|
-
| `useDebounce`
|
|
84
|
-
| `useThrottle`
|
|
70
|
+
| Hook | Description |
|
|
71
|
+
| ------------------------- | --------------------------------------------------------------------------- |
|
|
72
|
+
| `useLocalStorage` | JSON-based persistent state with error handling (SSR-safe) |
|
|
73
|
+
| `useWindowScroll` | Track window scroll position and percentage (iOS visualViewport compatible) |
|
|
74
|
+
| `useElementScroll` | Monitor scroll state of specific elements using ResizeObserver |
|
|
75
|
+
| `useElementPosition` | Monitor element bounding rect on scroll/resize (element ref support) |
|
|
76
|
+
| `useResponsiveSize` | Track element size with Tailwind-like breakpoints (debounced) |
|
|
77
|
+
| `useBodyScrollLock` | Lock/unlock body scroll with style preservation (iOS-specific handling) |
|
|
78
|
+
| `useClickOutside` | Run a callback when a click/touch happens outside a referenced element |
|
|
79
|
+
| `useScrollToElements` | Scroll to specific elements by index (adjustable offset) |
|
|
80
|
+
| `useImage` | Preload images and expose loading/error states |
|
|
81
|
+
| `useRecursiveTimeout` | Recursively schedule async/sync callbacks |
|
|
82
|
+
| `useViewport` | visualViewport support with in-app mode option and debounce |
|
|
83
|
+
| `useDebounce` | Delay function execution to prevent excessive updates (autoInvoke support) |
|
|
84
|
+
| `useThrottle` | Throttle value updates to a fixed interval |
|
|
85
|
+
| `useHistoryState` | Undo/redo state management with a configurable history limit |
|
|
86
|
+
| `useIntersectionObserver` | Track an element's viewport intersection via a callback ref |
|
|
85
87
|
|
|
86
88
|
## Development
|
|
87
89
|
|
|
@@ -112,7 +114,9 @@ src/
|
|
|
112
114
|
│ ├── use-debounce.ts
|
|
113
115
|
│ ├── use-element-position.ts
|
|
114
116
|
│ ├── use-element-scroll.ts
|
|
117
|
+
│ ├── use-history-state.ts
|
|
115
118
|
│ ├── use-image.ts
|
|
119
|
+
│ ├── use-intersection-observer.ts
|
|
116
120
|
│ ├── use-local-storage.ts
|
|
117
121
|
│ ├── use-recursive-timeout.ts
|
|
118
122
|
│ ├── use-responsive-size.ts
|
package/dist/hooks/index.d.mts
CHANGED
|
@@ -4,6 +4,7 @@ import { useClickOutside } from "./use-click-outside.mjs";
|
|
|
4
4
|
import { useElementPosition } from "./use-element-position.mjs";
|
|
5
5
|
import { useElementScroll } from "./use-element-scroll.mjs";
|
|
6
6
|
import { useHistoryState } from "./use-history-state.mjs";
|
|
7
|
+
import { useIntersectionObserver } from "./use-intersection-observer.mjs";
|
|
7
8
|
import { useResponsiveSize } from "./use-responsive-size.mjs";
|
|
8
9
|
import { useImage } from "./use-image.mjs";
|
|
9
10
|
import { useLocalStorage } from "./use-local-storage.mjs";
|
package/dist/hooks/index.mjs
CHANGED
|
@@ -4,6 +4,7 @@ import useClickOutside from "./use-click-outside.mjs";
|
|
|
4
4
|
import useElementPosition from "./use-element-position.mjs";
|
|
5
5
|
import useElementScroll from "./use-element-scroll.mjs";
|
|
6
6
|
import useHistoryState from "./use-history-state.mjs";
|
|
7
|
+
import useIntersectionObserver from "./use-intersection-observer.mjs";
|
|
7
8
|
import useResponsiveSize from "./use-responsive-size.mjs";
|
|
8
9
|
import useImage from "./use-image.mjs";
|
|
9
10
|
import useLocalStorage from "./use-local-storage.mjs";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
//#region src/hooks/use-intersection-observer.d.ts
|
|
2
|
+
declare const useIntersectionObserver: <T extends Element = Element>(options?: IntersectionObserverInit) => [(node: T | null) => void, IntersectionObserverEntry | null];
|
|
3
|
+
//#endregion
|
|
4
|
+
export { useIntersectionObserver };
|
|
5
|
+
//# sourceMappingURL=use-intersection-observer.d.mts.map
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useCallback, useRef, useState } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/use-intersection-observer.ts
|
|
4
|
+
const useIntersectionObserver = (options) => {
|
|
5
|
+
const [entry, setEntry] = useState(null);
|
|
6
|
+
const observerRef = useRef(null);
|
|
7
|
+
return [useCallback((node) => {
|
|
8
|
+
if (observerRef.current) {
|
|
9
|
+
observerRef.current.disconnect();
|
|
10
|
+
observerRef.current = null;
|
|
11
|
+
}
|
|
12
|
+
if (!node || typeof IntersectionObserver === "undefined") return;
|
|
13
|
+
const observer = new IntersectionObserver(([observedEntry]) => {
|
|
14
|
+
setEntry(observedEntry);
|
|
15
|
+
}, options);
|
|
16
|
+
observer.observe(node);
|
|
17
|
+
observerRef.current = observer;
|
|
18
|
+
}, []), entry];
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
//#endregion
|
|
22
|
+
export { useIntersectionObserver as default };
|
|
23
|
+
//# sourceMappingURL=use-intersection-observer.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-intersection-observer.mjs","names":[],"sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst useIntersectionObserver = <T extends Element = Element>(\n options?: IntersectionObserverInit,\n): [(node: T | null) => void, IntersectionObserverEntry | null] => {\n const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n // `options` is typically re-created as a fresh object on every render by\n // callers (e.g. spreading caller-provided overrides into defaults), so it\n // intentionally isn't a dependency here — that would tear down and\n // recreate the observer on every render. The ref callback only re-runs\n // when the observed node itself changes, capturing whatever `options`\n // was current at that time (matching the common useIntersectionObserver\n // convention, e.g. @uidotdev/usehooks).\n const ref = useCallback((node: T | null) => {\n if (observerRef.current) {\n observerRef.current.disconnect();\n observerRef.current = null;\n }\n\n if (!node || typeof IntersectionObserver === 'undefined') {\n return;\n }\n\n const observer = new IntersectionObserver(([observedEntry]) => {\n setEntry(observedEntry);\n }, options);\n\n observer.observe(node);\n observerRef.current = observer;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return [ref, entry];\n};\n\nexport default useIntersectionObserver;\n"],"mappings":";;;AAEA,MAAM,2BACJ,YACiE;CACjE,MAAM,CAAC,OAAO,YAAY,SAA2C,KAAK;CAC1E,MAAM,cAAc,OAAoC,KAAK;AA4B7D,QAAO,CAnBK,aAAa,SAAmB;AAC1C,MAAI,YAAY,SAAS;AACvB,eAAY,QAAQ,YAAY;AAChC,eAAY,UAAU;;AAGxB,MAAI,CAAC,QAAQ,OAAO,yBAAyB,YAC3C;EAGF,MAAM,WAAW,IAAI,sBAAsB,CAAC,mBAAmB;AAC7D,YAAS,cAAc;KACtB,QAAQ;AAEX,WAAS,QAAQ,KAAK;AACtB,cAAY,UAAU;IAErB,EAAE,CAAC,EAEO,MAAM"}
|
package/dist/index.d.mts
CHANGED
|
@@ -4,6 +4,7 @@ import { useClickOutside } from "./hooks/use-click-outside.mjs";
|
|
|
4
4
|
import { useElementPosition } from "./hooks/use-element-position.mjs";
|
|
5
5
|
import { useElementScroll } from "./hooks/use-element-scroll.mjs";
|
|
6
6
|
import { useHistoryState } from "./hooks/use-history-state.mjs";
|
|
7
|
+
import { useIntersectionObserver } from "./hooks/use-intersection-observer.mjs";
|
|
7
8
|
import { useResponsiveSize } from "./hooks/use-responsive-size.mjs";
|
|
8
9
|
import { useImage } from "./hooks/use-image.mjs";
|
|
9
10
|
import { useLocalStorage } from "./hooks/use-local-storage.mjs";
|
|
@@ -14,4 +15,4 @@ import { useTimeline } from "./hooks/use-timeline.mjs";
|
|
|
14
15
|
import { useWindowScroll } from "./hooks/use-window-scroll.mjs";
|
|
15
16
|
import { useViewport } from "./hooks/use-viewport.mjs";
|
|
16
17
|
import "./hooks/index.mjs";
|
|
17
|
-
export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
|
|
18
|
+
export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
|
package/dist/index.mjs
CHANGED
|
@@ -4,6 +4,7 @@ import useClickOutside from "./hooks/use-click-outside.mjs";
|
|
|
4
4
|
import useElementPosition from "./hooks/use-element-position.mjs";
|
|
5
5
|
import useElementScroll from "./hooks/use-element-scroll.mjs";
|
|
6
6
|
import useHistoryState from "./hooks/use-history-state.mjs";
|
|
7
|
+
import useIntersectionObserver from "./hooks/use-intersection-observer.mjs";
|
|
7
8
|
import useResponsiveSize from "./hooks/use-responsive-size.mjs";
|
|
8
9
|
import useImage from "./hooks/use-image.mjs";
|
|
9
10
|
import useLocalStorage from "./hooks/use-local-storage.mjs";
|
|
@@ -15,4 +16,4 @@ import useWindowScroll from "./hooks/use-window-scroll.mjs";
|
|
|
15
16
|
import useViewport from "./hooks/use-viewport.mjs";
|
|
16
17
|
import "./hooks/index.mjs";
|
|
17
18
|
|
|
18
|
-
export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
|
|
19
|
+
export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
|