{"_id":"@bowenhuang/react-virtual-list","name":"@bowenhuang/react-virtual-list","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bowenhuang/react-virtual-list","version":"0.1.0","description":"A lightweight virtual list component for React with dynamic item heights.","keywords":["react","virtual-list","virtualization","infinite-scroll","performance"],"homepage":"https://github.com/BowenHBX/react-virtual-list#readme","repository":{"type":"git","url":"git+https://github.com/BowenHBX/react-virtual-list.git"},"license":"MIT","author":{"name":"BowenHBX"},"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --clean","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest","demo":"vite --config demo/vite.config.ts","build:demo":"vite build --config demo/vite.config.ts","prepublishOnly":"npm run build && npm run typecheck && npm run test"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","@vitejs/plugin-react":"^4.3.4","jsdom":"^26.0.0","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.5.0","typescript":"^5.8.2","vite":"^6.2.1","vitest":"^3.0.7"},"_id":"@bowenhuang/react-virtual-list@0.1.0","gitHead":"eae6212363e94d89e88b3ddea2e1a1a68eca24fd","bugs":{"url":"https://github.com/BowenHBX/react-virtual-list/issues"},"_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-CHMs2O7Ut1JF+bI8RYtPph12+fvSb0MdU687uJljyF6nUjyIMCC7BBMfHa4zn8vmehrItSexKgffSBr9Ht9PIg==","shasum":"6c990729bfcf74fe2b0d81a3b913f132a72235b5","tarball":"https://registry.npmjs.org/@bowenhuang/react-virtual-list/-/react-virtual-list-0.1.0.tgz","fileCount":8,"unpackedSize":25657,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFvdnXoYHyy8ijBzG9sBoQzU9geerAfPkzW5yAo2r27OAiEA3tyFSbY/VG79Tpy70GomwaVVwaj0eu0vyy220iw6Ync="}]},"_npmUser":{"name":"bowenhuang","email":"huang_bx@qq.com"},"directories":{},"maintainers":[{"name":"bowenhuang","email":"huang_bx@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-virtual-list_0.1.0_1772704326530_0.44107146021782384"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-05T09:52:06.426Z","0.1.0":"2026-03-05T09:52:06.700Z","modified":"2026-03-05T09:52:06.876Z"},"maintainers":[{"name":"bowenhuang","email":"huang_bx@qq.com"}],"description":"A lightweight virtual list component for React with dynamic item heights.","homepage":"https://github.com/BowenHBX/react-virtual-list#readme","keywords":["react","virtual-list","virtualization","infinite-scroll","performance"],"repository":{"type":"git","url":"git+https://github.com/BowenHBX/react-virtual-list.git"},"author":{"name":"BowenHBX"},"bugs":{"url":"https://github.com/BowenHBX/react-virtual-list/issues"},"license":"MIT","readme":"# react-virtual-list\n\n一个轻量级 React 虚拟列表组件，支持动态高度列表渲染。\n\n[English](./README.md)\n\n## 安装\n\n```bash\nnpm install react-virtual-list\n```\n\n## 本地开发\n\n```bash\n# 运行单元测试\nnpm run test\n\n# 启动 demo 页面\nnpm run demo\n```\n\n## 快速开始\n\n```tsx\nimport React from 'react';\nimport VirtualList from 'react-virtual-list';\n\ntype Row = { id: string; title: string };\n\nconst data: Row[] = Array.from({ length: 2000 }).map((_, i) => ({\n id: String(i),\n title: `Row ${i}`,\n}));\n\nexport default function Demo() {\n return (\n item.id}\n itemContent={(index, item) => (\n
\n {index}. {item.title}\n
\n )}\n />\n );\n}\n```\n\n## 动态高度示例\n\n```tsx\nimport React from 'react';\nimport VirtualList from 'react-virtual-list';\n\nconst blocks = Array.from({ length: 500 }).map((_, i) => ({\n id: i,\n text: `Block ${i} ` + 'content '.repeat((i % 6) + 1),\n}));\n\nexport default function DynamicDemo() {\n return (\n (\n
\n

{item.id}

\n

{item.text}

\n
\n )}\n />\n );\n}\n```\n\n## API\n\n### `VirtualListProps`\n\n| 属性 | 类型 | 默认值 | 说明 |\n| --- | --- | --- | --- |\n| `data` | `T[]` | - | 完整列表数据源 |\n| `itemContent` | `(index: number, item: T) => ReactNode` | - | 单项渲染函数 |\n| `customScrollParent` | `HTMLElement \\| null` | `document.documentElement` | 自定义滚动容器 |\n| `estimatedItemHeight` | `number` | `200` | 未测量前的预估行高 |\n| `overscan` | `number` | `800` | 视区上下额外渲染像素（px） |\n| `className` | `string` | - | 外层容器类名 |\n| `style` | `CSSProperties` | - | 外层容器样式 |\n| `itemClassName` | `(item: T, index: number) => string` | - | 单项容器类名回调 |\n| `getItemKey` | `(item: T, index: number) => React.Key` | `index` | 列表项稳定 key 生成器 |\n| `components.Item` | `ComponentType>` | - | 可选自定义 Item 包装组件 |\n\n### `VirtualListItemComponentProps`\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `item` | `T` | 当前项数据 |\n| `index` | `number` | 当前项索引 |\n| `className` | `string \\| undefined` | 来自 `itemClassName` 的类名 |\n| `children` | `ReactNode` | `itemContent` 渲染结果 |\n\n## 说明\n\n- 该包面向浏览器环境（对 SSR 场景做了 `window`/`document` 安全判断）。\n- 建议优先传入稳定的 `getItemKey` 以获得更好的渲染性能。\n- 动态高度会在渲染后测量，测量前使用 `estimatedItemHeight` 参与计算。\n","readmeFilename":"README.zh-CN.md","_rev":"1-78d53686ccfd97079f88049f6d40cb12"}