{"_id":"@bongsik/virtual-list","_rev":"2-5bc622ee1707c95b2cf7fe27caf2a97c","name":"@bongsik/virtual-list","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@bongsik/virtual-list","version":"0.1.1","keywords":["react","virtual-list","virtualization","virtual-scroll","performance","typescript"],"author":{"name":"parkjungyuxx"},"license":"MIT","_id":"@bongsik/virtual-list@0.1.1","maintainers":[{"name":"parkjungyu","email":"parkjungyu09@gmail.com"}],"homepage":"https://github.com/parkjungyuxx/off-the-pitch#readme","bugs":{"url":"https://github.com/parkjungyuxx/off-the-pitch/issues"},"dist":{"shasum":"ad0cc503e9fac53fd6ce7b4943e253272667aeeb","tarball":"https://registry.npmjs.org/@bongsik/virtual-list/-/virtual-list-0.1.1.tgz","fileCount":8,"integrity":"sha512-qtetAdfVv9WadBcHt4T8TjtpiMU200/n2vXNO1soVVi7kKjzkJRTpaO0uHWXI5ugsANAVgaKOj7bPPHZIg5agg==","signatures":[{"sig":"MEYCIQDvUZydhq4D6eF4OMin/cYKZroKpuuVkETHbkjEhIe/wwIhAMwzzo1xLSdzgBOfqDBhyEM0Vzlb7kEd9Qg5P4FwASpw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53270},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"3f532673d30607dc65e292b865f40a2cf1d0571f","scripts":{"dev":"tsup --watch","lint":"eslint \"src/**/*.{ts,tsx}\"","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"parkjungyu","email":"parkjungyu09@gmail.com"},"repository":{"url":"git+https://github.com/parkjungyuxx/off-the-pitch.git","type":"git","directory":"packages/virtual-list"},"_npmVersion":"11.4.1","description":"React hook for virtualized list rendering","directories":{},"_nodeVersion":"23.6.1","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.2.0","eslint":"^8.57.0","react-dom":"^19.2.0","@eslint/js":"^8.57.0","typescript":"^5","@types/react":"^19","@types/react-dom":"^19","typescript-eslint":"^7.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/virtual-list_0.1.1_1764065914904_0.07020096106338247","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bongsik/virtual-list","version":"0.1.2","description":"React hook for virtualized list rendering","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint \"src/**/*.{ts,tsx}\"","type-check":"tsc --noEmit"},"keywords":["react","virtual-list","virtualization","virtual-scroll","performance","typescript"],"author":{"name":"parkjungyuxx"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/parkjungyuxx/off-the-pitch.git","directory":"packages/virtual-list"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@eslint/js":"^8.57.0","@types/react":"^19","@types/react-dom":"^19","eslint":"^8.57.0","react":"^19.2.0","react-dom":"^19.2.0","typescript-eslint":"^7.0.0","tsup":"^8.0.0","typescript":"^5"},"_id":"@bongsik/virtual-list@0.1.2","gitHead":"d01d5d5f12f835eb7f621d85f439c274dbc4513b","bugs":{"url":"https://github.com/parkjungyuxx/off-the-pitch/issues"},"homepage":"https://github.com/parkjungyuxx/off-the-pitch#readme","_nodeVersion":"23.6.1","_npmVersion":"11.4.1","dist":{"integrity":"sha512-ozAdhVRNJfefWDrliFSF23D5OQuZwxYeG3LoCc0Yct+1/dgwc7ziHlKm4ILWmRHxIiuLVJAaOEd+r2X2Pm/faw==","shasum":"dcd12dd65097c5e534d05e31076ff35a094bb610","tarball":"https://registry.npmjs.org/@bongsik/virtual-list/-/virtual-list-0.1.2.tgz","fileCount":8,"unpackedSize":57200,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHL69wm0vLl1LT6vqwR4kYOTZaNQYK5KqRKp3cdC/z+cAiAiVHJPyGKxGyA4FPhDRKffCctRxHnUirroxCk9/bbDgw=="}]},"_npmUser":{"name":"parkjungyu","email":"parkjungyu09@gmail.com"},"directories":{},"maintainers":[{"name":"parkjungyu","email":"parkjungyu09@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/virtual-list_0.1.2_1764160806087_0.11564118774743282"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-25T10:18:34.831Z","modified":"2025-11-26T12:40:06.529Z","0.1.1":"2025-11-25T10:18:35.101Z","0.1.2":"2025-11-26T12:40:06.310Z"},"bugs":{"url":"https://github.com/parkjungyuxx/off-the-pitch/issues"},"author":{"name":"parkjungyuxx"},"license":"MIT","homepage":"https://github.com/parkjungyuxx/off-the-pitch#readme","keywords":["react","virtual-list","virtualization","virtual-scroll","performance","typescript"],"repository":{"type":"git","url":"git+https://github.com/parkjungyuxx/off-the-pitch.git","directory":"packages/virtual-list"},"description":"React hook for virtualized list rendering","maintainers":[{"name":"parkjungyu","email":"parkjungyu09@gmail.com"}],"readme":"# @bongsik/virtual-list\n\nReact hook for virtualized list rendering to improve performance with large lists.\n\n## Installation\n\n```bash\nnpm install @bongsik/virtual-list\n# or\npnpm add @bongsik/virtual-list\n# or\nyarn add @bongsik/virtual-list\n```\n\n## Usage\n\n```tsx\nimport { useVirtualList } from \"@bongsik/virtual-list\";\n\nfunction MyList() {\n const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);\n\n const {\n virtualItems,\n totalHeight,\n containerStyle,\n handleScroll,\n scrollElementRef,\n } = useVirtualList({\n itemCount: items.length,\n itemHeight: 50, // 고정 높이\n containerHeight: 400,\n overscan: 3,\n });\n\n return (\n
\n
\n {virtualItems.map((virtualItem) => (\n \n {items[virtualItem.index]}\n
\n ))}\n
\n \n );\n}\n```\n\n### 동적 높이 사용\n\n```tsx\nconst {\n virtualItems,\n totalHeight,\n containerStyle,\n handleScroll,\n scrollElementRef,\n} = useVirtualList({\n itemCount: items.length,\n itemHeight: (index) => {\n // 각 아이템의 높이를 동적으로 계산\n return index % 2 === 0 ? 50 : 80;\n },\n containerHeight: 400,\n});\n\nreturn (\n
\n {/* ... */}\n
\n);\n```\n\n## API\n\n### `useVirtualList(options)`\n\n#### Options\n\n| Property | Type | Default | Description |\n| ----------------- | --------------------------------------- | ------------- | ----------------------------------------------------------------------------------- |\n| `itemCount` | `number` | **required** | 전체 아이템 개수 |\n| `itemHeight` | `number \\| ((index: number) => number)` | **required** | 각 아이템의 높이 (px) 또는 높이 계산 함수 |\n| `containerHeight` | `number` | `0` | 컨테이너 높이. `containerRef`나 `scrollElementRef`를 사용하는 경우 선택 |\n| `containerRef` | `RefObject` | `undefined` | 이미 존재하는 컨테이너 요소를 전달할 때 사용 |\n| `overscan` | `number` | `3` | 화면 밖에 렌더링할 추가 아이템 개수 |\n| `scrollOffset` | `number` | `0` | 초기 스크롤 오프셋 (px) 또는 외부 제어 값 |\n| `scrollTarget` | `\"container\" \\| \"window\"` | `\"container\"` | 스크롤을 감지할 대상. window 모드에서는 `handleScroll`/`containerStyle`이 필요 없음 |\n\n#### Returns\n\n| Property | Type | Description |\n| ------------------ | ------------------------------------------------------ | -------------------------------------------------------------- |\n| `virtualItems` | `VirtualItem[]` | 현재 보이는 가상 아이템들 |\n| `totalHeight` | `number` | 전체 리스트의 총 높이 (px) |\n| `containerStyle` | `React.CSSProperties` | 컨테이너에 적용할 스타일 (`scrollTarget === \"container\"`일 때) |\n| `handleScroll` | `(e: React.UIEvent) => void \\| undefined` | 스크롤 이벤트 핸들러. 컨테이너 모드에서만 제공 |\n| `scrollElementRef` | `RefObject` | 컨테이너 ref가 없다면 이 ref를 컨테이너에 연결 |\n\n### `VirtualItem`\n\n| Property | Type | Description |\n| -------- | -------- | ----------------------- |\n| `index` | `number` | 아이템의 인덱스 |\n| `start` | `number` | 아이템의 시작 위치 (px) |\n| `size` | `number` | 아이템의 크기 (px) |\n| `end` | `number` | 아이템의 끝 위치 (px) |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}