@jbpark/use-hooks 2.5.0 → 2.7.0

package/README.ko.md

@@ -84,6 +84,7 @@ function MyComponent() {
 | `useThrottle`             | 값 업데이트를 일정 간격으로 제한                                  |
 | `useHistoryState`         | 히스토리 개수 제한을 설정할 수 있는 실행 취소/다시 실행 상태 관리 |
 | `useIntersectionObserver` | 콜백 ref로 요소의 뷰포트 교차 여부 추적                           |
+| `useMultiSelect`          | shift-클릭 범위 선택을 지원하는 체크박스 스타일 다중 선택         |
 
 ## 개발
 
@@ -118,6 +119,7 @@ src/
 │   ├── use-image.ts
 │   ├── use-intersection-observer.ts
 │   ├── use-local-storage.ts
+│   ├── use-multi-select.ts
 │   ├── use-recursive-timeout.ts
 │   ├── use-responsive-size.ts
 │   ├── use-scroll-to-elements.ts

package/README.md

@@ -84,6 +84,7 @@ function MyComponent() {
 | `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                 |
+| `useMultiSelect`          | Checkbox-style multi-select for a list, with shift-click range selection    |
 
 ## Development
 
@@ -118,6 +119,7 @@ src/
 │   ├── use-image.ts
 │   ├── use-intersection-observer.ts
 │   ├── use-local-storage.ts
+│   ├── use-multi-select.ts
 │   ├── use-recursive-timeout.ts
 │   ├── use-responsive-size.ts
 │   ├── use-scroll-to-elements.ts

package/dist/hooks/index.d.mts

@@ -3,11 +3,13 @@ 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 { useFileToDataUrl } from "./use-file-to-data-url.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";
+import { useMultiSelect } from "./use-multi-select.mjs";
 import { useRecursiveTimeout } from "./use-recursive-timeout.mjs";
 import { useScrollToElements } from "./use-scroll-to-elements.mjs";
 import { useThrottle } from "./use-throttle.mjs";

package/dist/hooks/index.mjs

@@ -3,11 +3,13 @@ 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 useFileToDataUrl from "./use-file-to-data-url.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";
+import useMultiSelect from "./use-multi-select.mjs";
 import useRecursiveTimeout from "./use-recursive-timeout.mjs";
 import useScrollToElements from "./use-scroll-to-elements.mjs";
 import useThrottle from "./use-throttle.mjs";

package/dist/hooks/use-file-to-data-url.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/use-file-to-data-url.d.ts
+declare const useFileToDataUrl: () => (file: File) => Promise<string>;
+//#endregion
+export { useFileToDataUrl };
+//# sourceMappingURL=use-file-to-data-url.d.mts.map

package/dist/hooks/use-file-to-data-url.mjs

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+
+//#region src/hooks/use-file-to-data-url.ts
+const useFileToDataUrl = () => {
+	return useCallback((file) => {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = () => {
+				if (typeof reader.result === "string") resolve(reader.result);
+				else reject(/* @__PURE__ */ new Error("Failed to read file as a data URL."));
+			};
+			reader.onerror = () => {
+				reject(reader.error ?? /* @__PURE__ */ new Error("Failed to read file."));
+			};
+			reader.readAsDataURL(file);
+		});
+	}, []);
+};
+
+//#endregion
+export { useFileToDataUrl as default };
+//# sourceMappingURL=use-file-to-data-url.mjs.map

package/dist/hooks/use-file-to-data-url.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-to-data-url.mjs","names":[],"sources":["../../src/hooks/use-file-to-data-url.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nconst useFileToDataUrl = () => {\n  const readAsDataUrl = useCallback((file: File): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      const reader = new FileReader();\n\n      reader.onload = () => {\n        if (typeof reader.result === 'string') {\n          resolve(reader.result);\n        } else {\n          reject(new Error('Failed to read file as a data URL.'));\n        }\n      };\n\n      reader.onerror = () => {\n        reject(reader.error ?? new Error('Failed to read file.'));\n      };\n\n      reader.readAsDataURL(file);\n    });\n  }, []);\n\n  return readAsDataUrl;\n};\n\nexport default useFileToDataUrl;\n"],"mappings":";;;AAEA,MAAM,yBAAyB;AAqB7B,QApBsB,aAAa,SAAgC;AACjE,SAAO,IAAI,SAAS,SAAS,WAAW;GACtC,MAAM,SAAS,IAAI,YAAY;AAE/B,UAAO,eAAe;AACpB,QAAI,OAAO,OAAO,WAAW,SAC3B,SAAQ,OAAO,OAAO;QAEtB,wBAAO,IAAI,MAAM,qCAAqC,CAAC;;AAI3D,UAAO,gBAAgB;AACrB,WAAO,OAAO,yBAAS,IAAI,MAAM,uBAAuB,CAAC;;AAG3D,UAAO,cAAc,KAAK;IAC1B;IACD,EAAE,CAAC"}

package/dist/hooks/use-multi-select.d.mts

@@ -0,0 +1,11 @@
+//#region src/hooks/use-multi-select.d.ts
+declare const useMultiSelect: (count: number) => {
+  readonly selected: Set<number>;
+  readonly isSelected: (index: number) => boolean;
+  readonly toggle: (index: number, shiftKey?: boolean) => void;
+  readonly clear: () => void;
+  readonly replace: (indices: Set<number>) => void;
+};
+//#endregion
+export { useMultiSelect };
+//# sourceMappingURL=use-multi-select.d.mts.map

package/dist/hooks/use-multi-select.mjs

@@ -0,0 +1,43 @@
+import { useCallback, useMemo, useState } from "react";
+
+//#region src/hooks/use-multi-select.ts
+const useMultiSelect = (count) => {
+	const [rawSelected, setRawSelected] = useState(/* @__PURE__ */ new Set());
+	const [anchor, setAnchor] = useState(null);
+	const selected = useMemo(() => {
+		const next = new Set([...rawSelected].filter((index) => index < count));
+		return next.size === rawSelected.size ? rawSelected : next;
+	}, [rawSelected, count]);
+	const toggle = useCallback((index, shiftKey = false) => {
+		setRawSelected((prev) => {
+			const next = new Set(prev);
+			if (shiftKey && anchor !== null) {
+				const [start, end] = anchor < index ? [anchor, index] : [index, anchor];
+				for (let i = start; i <= end; i++) next.add(i);
+				return next;
+			}
+			if (next.has(index)) next.delete(index);
+			else next.add(index);
+			return next;
+		});
+		setAnchor(index);
+	}, [anchor]);
+	const clear = useCallback(() => {
+		setRawSelected(/* @__PURE__ */ new Set());
+		setAnchor(null);
+	}, []);
+	const replace = useCallback((indices) => {
+		setRawSelected(indices);
+	}, []);
+	return {
+		selected,
+		isSelected: useCallback((index) => selected.has(index), [selected]),
+		toggle,
+		clear,
+		replace
+	};
+};
+
+//#endregion
+export { useMultiSelect as default };
+//# sourceMappingURL=use-multi-select.mjs.map

package/dist/hooks/use-multi-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-multi-select.mjs","names":[],"sources":["../../src/hooks/use-multi-select.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nconst useMultiSelect = (count: number) => {\n  const [rawSelected, setRawSelected] = useState<Set<number>>(new Set());\n  const [anchor, setAnchor] = useState<number | null>(null);\n\n  // Indices can outlive the item they pointed to (e.g. after the backing\n  // list shrinks) — clamp against the current count on every render\n  // instead of syncing state back via an effect.\n  const selected = useMemo(() => {\n    const next = new Set([...rawSelected].filter(index => index < count));\n    return next.size === rawSelected.size ? rawSelected : next;\n  }, [rawSelected, count]);\n\n  const toggle = useCallback(\n    (index: number, shiftKey = false) => {\n      setRawSelected(prev => {\n        const next = new Set(prev);\n\n        if (shiftKey && anchor !== null) {\n          const [start, end] =\n            anchor < index ? [anchor, index] : [index, anchor];\n\n          for (let i = start; i <= end; i++) {\n            next.add(i);\n          }\n          return next;\n        }\n\n        if (next.has(index)) {\n          next.delete(index);\n        } else {\n          next.add(index);\n        }\n        return next;\n      });\n      setAnchor(index);\n    },\n    [anchor],\n  );\n\n  const clear = useCallback(() => {\n    setRawSelected(new Set());\n    setAnchor(null);\n  }, []);\n\n  const replace = useCallback((indices: Set<number>) => {\n    setRawSelected(indices);\n  }, []);\n\n  const isSelected = useCallback(\n    (index: number) => selected.has(index),\n    [selected],\n  );\n\n  return {\n    selected,\n    isSelected,\n    toggle,\n    clear,\n    replace,\n  } as const;\n};\n\nexport default useMultiSelect;\n"],"mappings":";;;AAEA,MAAM,kBAAkB,UAAkB;CACxC,MAAM,CAAC,aAAa,kBAAkB,yBAAsB,IAAI,KAAK,CAAC;CACtE,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CAKzD,MAAM,WAAW,cAAc;EAC7B,MAAM,OAAO,IAAI,IAAI,CAAC,GAAG,YAAY,CAAC,QAAO,UAAS,QAAQ,MAAM,CAAC;AACrE,SAAO,KAAK,SAAS,YAAY,OAAO,cAAc;IACrD,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,SAAS,aACZ,OAAe,WAAW,UAAU;AACnC,kBAAe,SAAQ;GACrB,MAAM,OAAO,IAAI,IAAI,KAAK;AAE1B,OAAI,YAAY,WAAW,MAAM;IAC/B,MAAM,CAAC,OAAO,OACZ,SAAS,QAAQ,CAAC,QAAQ,MAAM,GAAG,CAAC,OAAO,OAAO;AAEpD,SAAK,IAAI,IAAI,OAAO,KAAK,KAAK,IAC5B,MAAK,IAAI,EAAE;AAEb,WAAO;;AAGT,OAAI,KAAK,IAAI,MAAM,CACjB,MAAK,OAAO,MAAM;OAElB,MAAK,IAAI,MAAM;AAEjB,UAAO;IACP;AACF,YAAU,MAAM;IAElB,CAAC,OAAO,CACT;CAED,MAAM,QAAQ,kBAAkB;AAC9B,iCAAe,IAAI,KAAK,CAAC;AACzB,YAAU,KAAK;IACd,EAAE,CAAC;CAEN,MAAM,UAAU,aAAa,YAAyB;AACpD,iBAAe,QAAQ;IACtB,EAAE,CAAC;AAON,QAAO;EACL;EACA,YAPiB,aAChB,UAAkB,SAAS,IAAI,MAAM,EACtC,CAAC,SAAS,CACX;EAKC;EACA;EACA;EACD"}

package/dist/index.d.mts

@@ -3,11 +3,13 @@ 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 { useFileToDataUrl } from "./hooks/use-file-to-data-url.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";
+import { useMultiSelect } from "./hooks/use-multi-select.mjs";
 import { useRecursiveTimeout } from "./hooks/use-recursive-timeout.mjs";
 import { useScrollToElements } from "./hooks/use-scroll-to-elements.mjs";
 import { useThrottle } from "./hooks/use-throttle.mjs";
@@ -15,4 +17,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, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/dist/index.mjs

@@ -3,11 +3,13 @@ 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 useFileToDataUrl from "./hooks/use-file-to-data-url.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";
+import useMultiSelect from "./hooks/use-multi-select.mjs";
 import useRecursiveTimeout from "./hooks/use-recursive-timeout.mjs";
 import useScrollToElements from "./hooks/use-scroll-to-elements.mjs";
 import useThrottle from "./hooks/use-throttle.mjs";
@@ -16,4 +18,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, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useFileToDataUrl, useHistoryState, useImage, useIntersectionObserver, useLocalStorage, useMultiSelect, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.31.1",
     "@eslint/js": "^9.33.0",
-    "@jbpark/ui-kit": "^2.7.0",
+    "@jbpark/ui-kit": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^24.5.2",