@jbpark/use-hooks 2.3.0 → 2.5.0

package/README.ko.md

@@ -11,7 +11,7 @@
 
 ## 기능
 
-- 📦 **13개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
+- 📦 **15개 프로덕션 레디 훅** - 스크롤, 뷰포트, 스토리지 등 다양한 유틸리티
 - 🎯 **TypeScript 지원** - 완전한 타입 지원으로 더 나은 개발 경험
 - ⚡ **트리 셰이킹 지원** - 필요한 것만 임포트하세요
 - 🔒 **SSR 안전** - window/document 전역 변수에 대한 보호
@@ -67,21 +67,23 @@ function MyComponent() {
 
 ## 사용 가능한 훅
 
-| 훅                    | 설명                                                            |
-| --------------------- | --------------------------------------------------------------- |
-| `useLocalStorage`     | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전)             |
-| `useWindowScroll`     | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응)     |
-| `useElementScroll`    | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적            |
-| `useElementPosition`  | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원) |
-| `useResponsiveSize`   | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce) |
-| `useBodyScrollLock`   | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)      |
-| `useClickOutside`     | 참조한 요소 바깥을 클릭/터치하면 콜백 실행                      |
-| `useScrollToElements` | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능)                |
-| `useImage`            | 이미지 사전로드 및 로딩/에러 상태 노출                          |
-| `useRecursiveTimeout` | 비동기/동기 콜백을 재귀적으로 스케줄링                          |
-| `useViewport`         | visualViewport 지원, 인앱 모드 옵션, debounce 포함              |
-| `useDebounce`         | 함수 실행을 지연해 과도한 업데이트를 방지 (autoInvoke 지원)     |
-| `useThrottle`         | 값 업데이트를 일정 간격으로 제한                                |
+| 훅                        | 설명                                                              |
+| ------------------------- | ----------------------------------------------------------------- |
+| `useLocalStorage`         | 에러 핸들링이 포함된 JSON 기반 영속 상태 (SSR 안전)               |
+| `useWindowScroll`         | 윈도우 스크롤 위치 및 백분율 추적 (iOS visualViewport 대응)       |
+| `useElementScroll`        | ResizeObserver를 사용한 특정 요소의 스크롤 상태 추적              |
+| `useElementPosition`      | 스크롤/리사이즈 시 요소의 바운딩 렉트 모니터링 (요소 참조 지원)   |
+| `useResponsiveSize`       | Tailwind 유사 브레이크포인트를 포함한 요소 크기 추적 (debounce)   |
+| `useBodyScrollLock`       | 스타일 보존을 포함한 바디 스크롤 잠금/해제 (iOS 특별 처리)        |
+| `useClickOutside`         | 참조한 요소 바깥을 클릭/터치하면 콜백 실행                        |
+| `useScrollToElements`     | 인덱스별로 특정 요소로 스크롤 (오프셋 조절 가능)                  |
+| `useImage`                | 이미지 사전로드 및 로딩/에러 상태 노출                            |
+| `useRecursiveTimeout`     | 비동기/동기 콜백을 재귀적으로 스케줄링                            |
+| `useViewport`             | visualViewport 지원, 인앱 모드 옵션, debounce 포함                |
+| `useDebounce`             | 함수 실행을 지연해 과도한 업데이트를 방지 (autoInvoke 지원)       |
+| `useThrottle`             | 값 업데이트를 일정 간격으로 제한                                  |
+| `useHistoryState`         | 히스토리 개수 제한을 설정할 수 있는 실행 취소/다시 실행 상태 관리 |
+| `useIntersectionObserver` | 콜백 ref로 요소의 뷰포트 교차 여부 추적                           |
 
 ## 개발
 
@@ -112,7 +114,9 @@ src/
 │   ├── use-debounce.ts
 │   ├── use-element-position.ts
 │   ├── use-element-scroll.ts
+│   ├── use-history-state.ts
 │   ├── use-image.ts
+│   ├── use-intersection-observer.ts
 │   ├── use-local-storage.ts
 │   ├── use-recursive-timeout.ts
 │   ├── use-responsive-size.ts
@@ -128,12 +132,11 @@ dist/                            # 빌드된 라이브러리 (ESM + types)
 
 ## 빌드 및 배포
 
-이 프로젝트는 `develop` → `main` 브랜치 흐름과 AI 기반 자동 릴리스 노트를 사용합니다:
+배포는 [changesets](https://github.com/changesets/changesets)로 완전히 자동화되어 있습니다:
 
-- **기능 브랜치**는 `develop`으로 머지됩니다.
-- `develop`에 push될 때마다 워크플로가 diff를 분석해 `CHANGELOG.md`의 `## [Unreleased]` 섹션에 항목을 누적합니다 (버전은 아직 올리지 않음).
-- `develop`이 `main`으로 머지되면 `Unreleased` 섹션에 버전+날짜가 확정되고 `package.json` 버전이 그에 맞춰 올라간 릴리스 PR이 생성됩니다.
-- 이 릴리스 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
+- `main`으로 향하는 PR마다 AI가 변경 내용을 요약한 changeset 파일을 초안으로 작성합니다.
+- `main`에 changeset들이 쌓이면 "Version Packages" PR이 `package.json`의 버전을 승격시키고 `CHANGELOG.md`를 정리합니다.
+- 이 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
 
 라이브러리는 다음과 같이 빌드됩니다:
 

package/README.md

@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
 
 ## Features
 
-- 📦 **13 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
+- 📦 **15 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
 - 🎯 **Full TypeScript Support** - Complete type definitions for better development experience
 - ⚡ **Tree-Shakeable** - Import only what you need
 - 🔒 **SSR-Safe** - Built-in protection for window/document globals
@@ -67,21 +67,23 @@ function MyComponent() {
 
 ## Available Hooks
 
-| Hook                  | Description                                                                 |
-| --------------------- | --------------------------------------------------------------------------- |
-| `useLocalStorage`     | JSON-based persistent state with error handling (SSR-safe)                  |
-| `useWindowScroll`     | Track window scroll position and percentage (iOS visualViewport compatible) |
-| `useElementScroll`    | Monitor scroll state of specific elements using ResizeObserver              |
-| `useElementPosition`  | Monitor element bounding rect on scroll/resize (element ref support)        |
-| `useResponsiveSize`   | Track element size with Tailwind-like breakpoints (debounced)               |
-| `useBodyScrollLock`   | Lock/unlock body scroll with style preservation (iOS-specific handling)     |
-| `useClickOutside`     | Run a callback when a click/touch happens outside a referenced element      |
-| `useScrollToElements` | Scroll to specific elements by index (adjustable offset)                    |
-| `useImage`            | Preload images and expose loading/error states                              |
-| `useRecursiveTimeout` | Recursively schedule async/sync callbacks                                   |
-| `useViewport`         | visualViewport support with in-app mode option and debounce                 |
-| `useDebounce`         | Delay function execution to prevent excessive updates (autoInvoke support)  |
-| `useThrottle`         | Throttle value updates to a fixed interval                                  |
+| Hook                      | Description                                                                 |
+| ------------------------- | --------------------------------------------------------------------------- |
+| `useLocalStorage`         | JSON-based persistent state with error handling (SSR-safe)                  |
+| `useWindowScroll`         | Track window scroll position and percentage (iOS visualViewport compatible) |
+| `useElementScroll`        | Monitor scroll state of specific elements using ResizeObserver              |
+| `useElementPosition`      | Monitor element bounding rect on scroll/resize (element ref support)        |
+| `useResponsiveSize`       | Track element size with Tailwind-like breakpoints (debounced)               |
+| `useBodyScrollLock`       | Lock/unlock body scroll with style preservation (iOS-specific handling)     |
+| `useClickOutside`         | Run a callback when a click/touch happens outside a referenced element      |
+| `useScrollToElements`     | Scroll to specific elements by index (adjustable offset)                    |
+| `useImage`                | Preload images and expose loading/error states                              |
+| `useRecursiveTimeout`     | Recursively schedule async/sync callbacks                                   |
+| `useViewport`             | visualViewport support with in-app mode option and debounce                 |
+| `useDebounce`             | Delay function execution to prevent excessive updates (autoInvoke support)  |
+| `useThrottle`             | Throttle value updates to a fixed interval                                  |
+| `useHistoryState`         | Undo/redo state management with a configurable history limit                |
+| `useIntersectionObserver` | Track an element's viewport intersection via a callback ref                 |
 
 ## Development
 
@@ -112,7 +114,9 @@ src/
 │   ├── use-debounce.ts
 │   ├── use-element-position.ts
 │   ├── use-element-scroll.ts
+│   ├── use-history-state.ts
 │   ├── use-image.ts
+│   ├── use-intersection-observer.ts
 │   ├── use-local-storage.ts
 │   ├── use-recursive-timeout.ts
 │   ├── use-responsive-size.ts
@@ -128,12 +132,11 @@ dist/                            # Built library (ESM + types)
 
 ## Build & Deployment
 
-This project uses a `develop` → `main` branch flow with automated, AI-assisted release notes:
+Releases are fully automated via [changesets](https://github.com/changesets/changesets):
 
-- **Feature branches** merge into `develop`.
-- On every push to `develop`, a workflow analyzes the diff and appends bullet points to the `## [Unreleased]` section of `CHANGELOG.md` (no version bump yet).
-- When `develop` is merged into `main`, that `Unreleased` section is stamped with a version + date and `package.json` is bumped to match, opened as a release PR.
-- Merging the release PR builds, publishes to npm, and tags the release.
+- Each PR against `main` gets an AI-drafted changeset file describing its change.
+- Once changesets accumulate on `main`, a "Version Packages" PR bumps `package.json`'s version and consolidates `CHANGELOG.md`.
+- Merging that PR builds, publishes to npm, and tags the release.
 
 The library is built as:
 

package/dist/hooks/index.d.mts

@@ -3,6 +3,8 @@ import { useBodyScrollLock } from "./use-body-scroll-lock.mjs";
 import { useClickOutside } from "./use-click-outside.mjs";
 import { useElementPosition } from "./use-element-position.mjs";
 import { useElementScroll } from "./use-element-scroll.mjs";
+import { useHistoryState } from "./use-history-state.mjs";
+import { useIntersectionObserver } from "./use-intersection-observer.mjs";
 import { useResponsiveSize } from "./use-responsive-size.mjs";
 import { useImage } from "./use-image.mjs";
 import { useLocalStorage } from "./use-local-storage.mjs";

package/dist/hooks/index.mjs

@@ -3,6 +3,8 @@ import useBodyScrollLock from "./use-body-scroll-lock.mjs";
 import useClickOutside from "./use-click-outside.mjs";
 import useElementPosition from "./use-element-position.mjs";
 import useElementScroll from "./use-element-scroll.mjs";
+import useHistoryState from "./use-history-state.mjs";
+import useIntersectionObserver from "./use-intersection-observer.mjs";
 import useResponsiveSize from "./use-responsive-size.mjs";
 import useImage from "./use-image.mjs";
 import useLocalStorage from "./use-local-storage.mjs";

package/dist/hooks/use-history-state.d.mts

@@ -0,0 +1,16 @@
+//#region src/hooks/use-history-state.d.ts
+interface UseHistoryStateOptions {
+  limit?: number;
+}
+declare const useHistoryState: <T>(initialValue: T, options?: UseHistoryStateOptions) => {
+  readonly value: T;
+  readonly setValue: (value: T | ((prev: T) => T)) => void;
+  readonly undo: () => void;
+  readonly redo: () => void;
+  readonly reset: (value: T) => void;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+};
+//#endregion
+export { useHistoryState };
+//# sourceMappingURL=use-history-state.d.mts.map

package/dist/hooks/use-history-state.mjs

@@ -0,0 +1,79 @@
+import { useCallback, useReducer } from "react";
+
+//#region src/hooks/use-history-state.ts
+const createReducer = (limit) => (state, action) => {
+	switch (action.type) {
+		case "SET": {
+			const resolved = action.value instanceof Function ? action.value(state.present) : action.value;
+			if (resolved === state.present) return state;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: resolved,
+				future: []
+			};
+		}
+		case "UNDO": {
+			if (state.past.length === 0) return state;
+			const previous = state.past[state.past.length - 1];
+			return {
+				past: state.past.slice(0, -1),
+				present: previous,
+				future: [state.present, ...state.future]
+			};
+		}
+		case "REDO": {
+			if (state.future.length === 0) return state;
+			const [next, ...rest] = state.future;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: next,
+				future: rest
+			};
+		}
+		case "RESET": return {
+			past: [],
+			present: action.value,
+			future: []
+		};
+		default: return state;
+	}
+};
+const DEFAULT_LIMIT = 50;
+const useHistoryState = (initialValue, options) => {
+	const [state, dispatch] = useReducer(createReducer(options?.limit ?? DEFAULT_LIMIT), {
+		past: [],
+		present: initialValue,
+		future: []
+	});
+	const setValue = useCallback((value) => {
+		dispatch({
+			type: "SET",
+			value
+		});
+	}, []);
+	const undo = useCallback(() => {
+		dispatch({ type: "UNDO" });
+	}, []);
+	const redo = useCallback(() => {
+		dispatch({ type: "REDO" });
+	}, []);
+	const reset = useCallback((value) => {
+		dispatch({
+			type: "RESET",
+			value
+		});
+	}, []);
+	return {
+		value: state.present,
+		setValue,
+		undo,
+		redo,
+		reset,
+		canUndo: state.past.length > 0,
+		canRedo: state.future.length > 0
+	};
+};
+
+//#endregion
+export { useHistoryState as default };
+//# sourceMappingURL=use-history-state.mjs.map

package/dist/hooks/use-history-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-history-state.mjs","names":[],"sources":["../../src/hooks/use-history-state.ts"],"sourcesContent":["import { useCallback, useReducer } from 'react';\n\ninterface HistoryState<T> {\n  past: T[];\n  present: T;\n  future: T[];\n}\n\ntype Action<T> =\n  | { type: 'SET'; value: T | ((prev: T) => T) }\n  | { type: 'UNDO' }\n  | { type: 'REDO' }\n  | { type: 'RESET'; value: T };\n\nconst createReducer =\n  <T>(limit: number) =>\n  (state: HistoryState<T>, action: Action<T>): HistoryState<T> => {\n    switch (action.type) {\n      case 'SET': {\n        const resolved =\n          action.value instanceof Function\n            ? action.value(state.present)\n            : action.value;\n\n        if (resolved === state.present) {\n          return state;\n        }\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: resolved,\n          future: [],\n        };\n      }\n\n      case 'UNDO': {\n        if (state.past.length === 0) {\n          return state;\n        }\n\n        const previous = state.past[state.past.length - 1] as T;\n\n        return {\n          past: state.past.slice(0, -1),\n          present: previous,\n          future: [state.present, ...state.future],\n        };\n      }\n\n      case 'REDO': {\n        if (state.future.length === 0) {\n          return state;\n        }\n\n        const [next, ...rest] = state.future;\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: next as T,\n          future: rest,\n        };\n      }\n\n      case 'RESET': {\n        return { past: [], present: action.value, future: [] };\n      }\n\n      default: {\n        return state;\n      }\n    }\n  };\n\ninterface UseHistoryStateOptions {\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT = 50;\n\nconst useHistoryState = <T>(\n  initialValue: T,\n  options?: UseHistoryStateOptions,\n) => {\n  const limit = options?.limit ?? DEFAULT_LIMIT;\n\n  const [state, dispatch] = useReducer(createReducer<T>(limit), {\n    past: [],\n    present: initialValue,\n    future: [],\n  });\n\n  const setValue = useCallback((value: T | ((prev: T) => T)) => {\n    dispatch({ type: 'SET', value });\n  }, []);\n\n  const undo = useCallback(() => {\n    dispatch({ type: 'UNDO' });\n  }, []);\n\n  const redo = useCallback(() => {\n    dispatch({ type: 'REDO' });\n  }, []);\n\n  const reset = useCallback((value: T) => {\n    dispatch({ type: 'RESET', value });\n  }, []);\n\n  return {\n    value: state.present,\n    setValue,\n    undo,\n    redo,\n    reset,\n    canUndo: state.past.length > 0,\n    canRedo: state.future.length > 0,\n  } as const;\n};\n\nexport default useHistoryState;\n"],"mappings":";;;AAcA,MAAM,iBACA,WACH,OAAwB,WAAuC;AAC9D,SAAQ,OAAO,MAAf;EACE,KAAK,OAAO;GACV,MAAM,WACJ,OAAO,iBAAiB,WACpB,OAAO,MAAM,MAAM,QAAQ,GAC3B,OAAO;AAEb,OAAI,aAAa,MAAM,QACrB,QAAO;AAGT,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ,EAAE;IACX;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,KAAK,WAAW,EACxB,QAAO;GAGT,MAAM,WAAW,MAAM,KAAK,MAAM,KAAK,SAAS;AAEhD,UAAO;IACL,MAAM,MAAM,KAAK,MAAM,GAAG,GAAG;IAC7B,SAAS;IACT,QAAQ,CAAC,MAAM,SAAS,GAAG,MAAM,OAAO;IACzC;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,OAAO,WAAW,EAC1B,QAAO;GAGT,MAAM,CAAC,MAAM,GAAG,QAAQ,MAAM;AAE9B,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ;IACT;;EAGH,KAAK,QACH,QAAO;GAAE,MAAM,EAAE;GAAE,SAAS,OAAO;GAAO,QAAQ,EAAE;GAAE;EAGxD,QACE,QAAO;;;AASf,MAAM,gBAAgB;AAEtB,MAAM,mBACJ,cACA,YACG;CAGH,MAAM,CAAC,OAAO,YAAY,WAAW,cAFvB,SAAS,SAAS,cAE4B,EAAE;EAC5D,MAAM,EAAE;EACR,SAAS;EACT,QAAQ,EAAE;EACX,CAAC;CAEF,MAAM,WAAW,aAAa,UAAgC;AAC5D,WAAS;GAAE,MAAM;GAAO;GAAO,CAAC;IAC/B,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,QAAQ,aAAa,UAAa;AACtC,WAAS;GAAE,MAAM;GAAS;GAAO,CAAC;IACjC,EAAE,CAAC;AAEN,QAAO;EACL,OAAO,MAAM;EACb;EACA;EACA;EACA;EACA,SAAS,MAAM,KAAK,SAAS;EAC7B,SAAS,MAAM,OAAO,SAAS;EAChC"}

package/dist/hooks/use-intersection-observer.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-intersection-observer.d.ts
+declare const useIntersectionObserver: <T extends Element = Element>(options?: IntersectionObserverInit) => [(node: T | null) => void, IntersectionObserverEntry | null];
+//#endregion
+export { useIntersectionObserver };
+//# sourceMappingURL=use-intersection-observer.d.mts.map

package/dist/hooks/use-intersection-observer.mjs

@@ -0,0 +1,23 @@
+import { useCallback, useRef, useState } from "react";
+
+//#region src/hooks/use-intersection-observer.ts
+const useIntersectionObserver = (options) => {
+	const [entry, setEntry] = useState(null);
+	const observerRef = useRef(null);
+	return [useCallback((node) => {
+		if (observerRef.current) {
+			observerRef.current.disconnect();
+			observerRef.current = null;
+		}
+		if (!node || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver(([observedEntry]) => {
+			setEntry(observedEntry);
+		}, options);
+		observer.observe(node);
+		observerRef.current = observer;
+	}, []), entry];
+};
+
+//#endregion
+export { useIntersectionObserver as default };
+//# sourceMappingURL=use-intersection-observer.mjs.map

package/dist/hooks/use-intersection-observer.mjs.map

@@ -0,0 +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

@@ -3,6 +3,8 @@ import { useBodyScrollLock } from "./hooks/use-body-scroll-lock.mjs";
 import { useClickOutside } from "./hooks/use-click-outside.mjs";
 import { useElementPosition } from "./hooks/use-element-position.mjs";
 import { useElementScroll } from "./hooks/use-element-scroll.mjs";
+import { useHistoryState } from "./hooks/use-history-state.mjs";
+import { useIntersectionObserver } from "./hooks/use-intersection-observer.mjs";
 import { useResponsiveSize } from "./hooks/use-responsive-size.mjs";
 import { useImage } from "./hooks/use-image.mjs";
 import { useLocalStorage } from "./hooks/use-local-storage.mjs";
@@ -13,4 +15,4 @@ import { useTimeline } from "./hooks/use-timeline.mjs";
 import { useWindowScroll } from "./hooks/use-window-scroll.mjs";
 import { useViewport } from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
-export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/dist/index.mjs

@@ -3,6 +3,8 @@ import useBodyScrollLock from "./hooks/use-body-scroll-lock.mjs";
 import useClickOutside from "./hooks/use-click-outside.mjs";
 import useElementPosition from "./hooks/use-element-position.mjs";
 import useElementScroll from "./hooks/use-element-scroll.mjs";
+import useHistoryState from "./hooks/use-history-state.mjs";
+import useIntersectionObserver from "./hooks/use-intersection-observer.mjs";
 import useResponsiveSize from "./hooks/use-responsive-size.mjs";
 import useImage from "./hooks/use-image.mjs";
 import useLocalStorage from "./hooks/use-local-storage.mjs";
@@ -14,4 +16,4 @@ import useWindowScroll from "./hooks/use-window-scroll.mjs";
 import useViewport from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
 
-export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",
@@ -41,6 +41,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && tsdown",
+    "build:demo": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "prepublishOnly": "pnpm build",
@@ -51,8 +52,10 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.1",
     "@eslint/js": "^9.33.0",
     "@jbpark/ui-kit": "^2.7.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.10",