{"_id":"react-branch-list","_rev":"39-b191102c84fbda299ae18fff07020dad","name":"react-branch-list","dist-tags":{"latest":"1.2.0"},"versions":{"0.0.1":{"name":"react-branch-list","version":"0.0.1","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.1","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"a57e9f78b9788b67485d2d4ee27380d3fc793a22","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.1.tgz","fileCount":14,"integrity":"sha512-pkBvPtnkrk7zfm5drfziz/vwKztQmHLRiRkOGlgHUJQ4HTeQ1nYLJb/cj2nbuQ5SOBGPpP2lU8Y4Kk6+0f9YsQ==","signatures":[{"sig":"MEQCIEh9tRSYRtk5tLmrLaIjbDdzyUB2T5aijNcClggd8oGQAiBh6IubdDO11Ti7hT1oxHVzSIFYq/QdPg7oRZz26uslpA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":257452},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"760201390629351c683466a049f6dd8ebef461ed","scripts":{"build":"node ./scripts/clean.js && rollup -c"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"react":"^19.0.0","vs-base-kits":"^0.0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.1_1738124731000_0.9958615717186465","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"react-branch-list","version":"0.0.2","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.2","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"14829bd8ba6afeb5a29edac1aeaabfbff74f121f","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.2.tgz","fileCount":14,"integrity":"sha512-uzS+B1Iq2u+MP36WqMBrO0JnUhISJ/aUV5ddHvs2Zc7zMnf/QwoClgH/3ma5YnvudL35+NeSCUi3+ALpn4n9lg==","signatures":[{"sig":"MEUCIDukpPQftdtXXynMZclaP90D7Q9/tT76dPYVW5He4z+fAiEAy/3F9faS9TrwrAr3QfoX+tPiQAf/Fx1Hz2SV/964GmM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":258096},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"a9a3700bb686563e9c1109f50f05066cfc69b660","scripts":{"build":"node ./scripts/clean.js && rollup -c","publish-npm":"yarn build && npm publish"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"react":"^19.0.0","vs-base-kits":"^0.0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.2_1738214110426_0.652422874639075","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"react-branch-list","version":"0.0.3","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.3","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"20949ecec80777f58b80bb1c264b52fc9229226b","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.3.tgz","fileCount":14,"integrity":"sha512-ifTh9I7Yr0jUr/jubFpVcSJuxnGQEetfZgyt25UHA1t2CJ1hvPzH5jLjDLSQJEOWEKCMi4GUi7cLpuyAtTpj0A==","signatures":[{"sig":"MEQCIH6MGAKJjjq80Hm7ULsO/vnH8D/1ZY5VF6l0/or99+EiAiBeArzg7F2h1VvL4gyZcalAkbvGuP/kCY7l3k8HSkL7aA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":259790},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"4b2357b097507c71b599dc2a2bb7eda47916414f","scripts":{"build":"node ./scripts/clean.js && rollup -c","publish-npm":"yarn build && npm publish"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"react":"^19.0.0","vs-base-kits":"^0.0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.3_1738215401560_0.6437529848026144","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"react-branch-list","version":"0.0.4","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.4","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"3d914372d4199c1ecce426b4484eab2c01ea272e","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.4.tgz","fileCount":14,"integrity":"sha512-XtxV7ovZ3gI9xSNUiolSHgdpnyz1iiIkK+kqxAUJVTxwnPc/syjOfNXyBPbu0iu1KKJxSFhbfcHqiBm3pVp/iA==","signatures":[{"sig":"MEYCIQDdwaP5aHVebAp/fJsQzLzDSgj9DVTs9NDG2yJPrifN9AIhAPTwWyDwTObZGAzKc1Q8WMT6elq5757kgSAFXnVIGoiB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":259694},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"fa8f48e008b3ed30b33a60f73b92986fcf4b8e58","scripts":{"build":"node ./scripts/clean.js && rollup -c","publish-npm":"yarn build && npm publish"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"react":"^19.0.0","vs-base-kits":"^0.0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.4_1738217933170_0.4443312712472771","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"react-branch-list","version":"0.0.5","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.5","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"4518640b93d056853e8036814a5f56f898c8ef03","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.5.tgz","fileCount":14,"integrity":"sha512-R9QCkonzu2zQSBn0F4CEoavajUWC07nG5embdwxjxQdc2igOiDwGhVQ8nNfPTC8rSR4TfF86BXWQT5a9/4nLgg==","signatures":[{"sig":"MEQCIBlVq3NRXBSJQtNJozGiA/n+xUlNPGkcAsUyQ+MuolhmAiBn+sLMjpk2+O+5SxIPZY3wggC3iGLoaXco5LeEMhC/cQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":192543},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"77494246429fdb285ed48dec9fe8d3082b7f9461","scripts":{"lint":"eslint .","build":"node ./scripts/clean.js && rollup -c","prettier":"prettier .","publish-npm":"yarn build && npm publish","prettier:fix":"prettier . --write"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"eslint":"^9.21.0","ts-node":"^10.9.2","prettier":"^3.5.2","vs-base-kits":"^1.0.1","eslint-plugin-prettier":"^5.2.3","@typescript-eslint/parser":"^8.25.0","@typescript-eslint/eslint-plugin":"^8.25.0"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","globals":"^16.0.0","@eslint/js":"^9.21.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","typescript-eslint":"^8.25.0","eslint-plugin-react":"^7.37.4","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.5_1740734192324_0.3184988967024027","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"react-branch-list","version":"0.0.6","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","_id":"react-branch-list@0.0.6","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"homepage":"https://github.com/SunXinZH/react-branch-list#readme","bugs":{"url":"https://github.com/SunXinZH/react-branch-list/issues"},"dist":{"shasum":"ac15bd62b25f27b7316f7a3675ed5348dfef20b5","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-0.0.6.tgz","fileCount":14,"integrity":"sha512-0rHFrv7moriAbcMaBaUS06l3q7p1WbU6G9KqCnqHL28Xo3OZiJsShx9hGMtBymVTis0BQNwcY0lE3RmDBaXzhg==","signatures":[{"sig":"MEUCIFj1mJbOt7yppZX4hvNWl6sJswnuJx3/GhCEAkumkLnPAiEA94EfF9GHM4O5XRwJD9wCnD18u4SMCHrISvGe3uLEVSU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":192538},"main":"./dist/index.js","types":"./dist/types/index.d.ts","module":"./dist/index.mjs","gitHead":"0de72bef3cd66932f372228ca87eecbc6d008b1c","scripts":{"lint":"eslint .","build":"node ./scripts/clean.js && rollup -c","prettier":"prettier .","publish-npm":"yarn build && npm publish","prettier:fix":"prettier . --write"},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"repository":{"url":"git+https://github.com/SunXinZH/react-branch-list.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering lists based on tree structures. ","directories":{},"_nodeVersion":"18.20.0","dependencies":{"eslint":"^9.21.0","ts-node":"^10.9.2","prettier":"^3.5.2","vs-base-kits":"^1.0.1","eslint-plugin-prettier":"^5.2.3","@typescript-eslint/parser":"^8.25.0","@typescript-eslint/eslint-plugin":"^8.25.0"},"_hasShrinkwrap":false,"devDependencies":{"tsc":"^2.0.4","tslib":"^2.8.1","rollup":"^2.0.0","globals":"^16.0.0","@eslint/js":"^9.21.0","typescript":"^5.7.3","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","typescript-eslint":"^8.25.0","eslint-plugin-react":"^7.37.4","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^13.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-branch-list_0.0.6_1740735188742_0.15117330978230403","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"react-branch-list","version":"1.2.0","description":"A React component for rendering lists based on tree structures. ","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/types/index.d.ts","scripts":{"build":"node ./scripts/clean.js && rollup -c","publish-npm":"yarn build && npm publish","lint":"eslint .","prettier":"prettier .","prettier:fix":"prettier . --write"},"repository.url":"https://github.com/SunXinZH/react-branch-list.git","author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","dependencies":{"prettier":"^3.5.2","ts-node":"^10.9.2","vs-base-kits":"^1.0.1"},"devDependencies":{"@eslint/js":"^9.21.0","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.0.0","@types/node":"^22.10.10","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","globals":"^16.0.0","rollup":"^2.0.0","rollup-plugin-typescript2":"^0.36.0","tsc":"^2.0.4","tslib":"^2.8.1","typescript":"^5.7.3","typescript-eslint":"^8.25.0"},"_id":"react-branch-list@1.2.0","gitHead":"4a0a2768e1f18993c6a1f31ebe5e9b9472c4aee6","_nodeVersion":"18.20.0","_npmVersion":"10.5.0","dist":{"integrity":"sha512-rZEXr1TEnJ4YQA9eS7UkmHI1MxWJqOJzK7op/A8QeT65Oe1B2UsBVDe5GCY3Nj3ADOC2xBxo2o8ofjBP/E3TlA==","shasum":"cfda2639c7f7e7fb66ccbd71924b6cbcf59400e8","tarball":"https://registry.npmjs.org/react-branch-list/-/react-branch-list-1.2.0.tgz","fileCount":14,"unpackedSize":193521,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDn3YSrjeTGTfbUh7Lyq93OGE2eOQ0JEsMJGqaMXizALAIgcCZ0DtgtEz3e3XC/YFR25XWkGnGOY5NQEmsY/sEWFYs="}]},"_npmUser":{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"},"directories":{},"maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-branch-list_1.2.0_1763452685075_0.08065809319462147"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-29T04:25:31.000Z","modified":"2025-11-18T07:58:05.437Z","1.0.0":"2025-01-26T15:57:33.297Z","1.0.1":"2025-01-26T16:09:32.091Z","1.0.2":"2025-01-26T16:22:34.301Z","1.0.3":"2025-01-26T16:45:14.847Z","1.0.4":"2025-01-27T04:16:18.506Z","1.0.5":"2025-01-27T04:25:15.470Z","1.0.6":"2025-01-27T04:47:07.643Z","1.0.8":"2025-01-27T05:03:30.248Z","1.0.9":"2025-01-27T06:08:18.219Z","1.0.10":"2025-01-27T06:12:03.159Z","1.0.11":"2025-01-27T06:14:54.471Z","1.0.12":"2025-01-27T06:17:18.262Z","1.0.13":"2025-01-27T06:21:25.514Z","1.0.14":"2025-01-27T06:24:28.875Z","1.0.15":"2025-01-27T06:31:26.607Z","1.0.16":"2025-01-27T06:39:08.634Z","1.0.17":"2025-01-27T06:42:38.036Z","1.0.18":"2025-01-27T07:00:35.227Z","1.0.19":"2025-01-27T07:02:21.311Z","1.0.20":"2025-01-27T08:05:47.513Z","1.0.21":"2025-01-27T08:14:03.301Z","1.0.22":"2025-01-27T08:20:06.800Z","1.0.23":"2025-01-27T08:22:06.674Z","1.0.24":"2025-01-27T08:25:54.165Z","1.0.25":"2025-01-27T09:14:43.512Z","1.0.26":"2025-01-27T09:17:58.679Z","1.0.27":"2025-01-27T09:24:01.170Z","1.0.28":"2025-01-27T09:25:36.028Z","1.0.29":"2025-01-27T09:28:26.915Z","1.1.0":"2025-01-27T14:56:41.260Z","1.1.1":"2025-01-27T14:58:58.545Z","0.0.1":"2025-01-29T04:25:31.178Z","0.0.2":"2025-01-30T05:15:10.660Z","0.0.3":"2025-01-30T05:36:41.811Z","0.0.4":"2025-01-30T06:18:53.345Z","0.0.5":"2025-02-28T09:16:32.552Z","0.0.6":"2025-02-28T09:33:08.929Z","1.2.0":"2025-11-18T07:58:05.261Z"},"author":{"name":"SunXin","email":"xin.sun.zh@gmail.com"},"license":"MIT","description":"A React component for rendering lists based on tree structures. ","maintainers":[{"name":"sunxin_zh","email":"xin.sun.zh@gmail.com"}],"readme":"# react-branch-list\n\n`react-branch-list` is a high-performance list component based on a binary tree structure, designed to optimize rendering efficiency in React. Unlike the traditional map approach, which triggers full list re-renders, this component performs localized updates when items are added, removed, or moved, significantly reducing React Fiber overhead.\n\n## 🎯 Why Use react-branch-list?\n\n### ❌ The Problem with Traditional map Rendering\n\nIn React, lists are typically rendered using:\n\n```tsx\nlist.map((i) => );\n```\n\nHowever, when items are added, removed, or reordered, React reconciles the entire list, causing unnecessary re-renders and increasing Fiber computation costs, especially in complex UI structures.\n\n### The react-branch-list Optimization\n\n- Efficient Updates – Only updates affected nodes instead of re-rendering the entire list.\n\n## 📖 Usage\n\n```tsx\nimport React from 'react';\n\nimport { BranchList, IBranchListRef, IBranchListItem } from 'react-branch-list';\n\ntype ContentType = { content: string };\n\nconst ItemComponent: React.FC> = ({ id, content }) => {\n return
{content}
;\n};\n\nexport const BranchListDemo: React.FC = () => {\n const provider = React.useMemo>(() => {\n return new BranchListProvider(\n new Array(5).fill(1).map((_, index) => {\n return {\n id: `node-${index}`,\n content: `content-${index}`,\n };\n }),\n );\n }, []);\n\n return (\n \n provider={provider}\n className=\"branch-list\"\n direction=\"column\"\n renderComponent={ItemComponent}\n />\n );\n};\n```\n\n## Demos\n\n```\ncd demos/simple-list\nyarn start\n```\n","readmeFilename":"README.md"}