{"id":40140159,"url":"https://github.com/mpkelly/react-tree","last_synced_at":"2026-01-19T14:12:11.338Z","repository":{"id":40717021,"uuid":"268247869","full_name":"mpkelly/react-tree","owner":"mpkelly","description":"A drag and drop tree component for ReactJS (alpha)","archived":false,"fork":false,"pushed_at":"2022-12-11T08:21:40.000Z","size":1758,"stargazers_count":6,"open_issues_count":17,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T04:13:53.537Z","etag":null,"topics":["a11y","accessible","aria","drag","drop","file-tree","react","sortable","sortable-tree","tree","typescript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/fervent-wave-u7psb?file=/src/App.tsx","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpkelly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-31T09:27:31.000Z","updated_at":"2024-01-06T00:09:44.000Z","dependencies_parsed_at":"2022-08-10T00:41:10.701Z","dependency_job_id":null,"html_url":"https://github.com/mpkelly/react-tree","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/mpkelly/react-tree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpkelly%2Freact-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpkelly%2Freact-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpkelly%2Freact-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpkelly%2Freact-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpkelly","download_url":"https://codeload.github.com/mpkelly/react-tree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpkelly%2Freact-tree/sbom","scorecard":{"id":662914,"data":{"date":"2025-08-11","repo":{"name":"github.com/mpkelly/react-tree","commit":"8c2c470eabd2fb590251c8312f1f92ffa4fd7008"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/26 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.MD:0","Info: FSF or OSI recognized license: MIT License: LICENSE.MD:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"98 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-29xr-v42j-r956","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg","Warn: Project is vulnerable to: GHSA-hw46-vg6w-88fj","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T16:47:27.132Z","repository_id":40717021,"created_at":"2025-08-21T16:47:27.133Z","updated_at":"2025-08-21T16:47:27.133Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28571587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T12:50:50.164Z","status":"ssl_error","status_checked_at":"2026-01-19T12:50:42.704Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessible","aria","drag","drop","file-tree","react","sortable","sortable-tree","tree","typescript"],"created_at":"2026-01-19T14:12:10.666Z","updated_at":"2026-01-19T14:12:11.332Z","avatar_url":"https://github.com/mpkelly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tree\n\nAn tiny, accessible React Tree component with a sensible API that supports sorting, drag \u0026 drop, keyboard navigation and cut/copy/paste while leaving the visual content entirely to the library user. \n\nThis tree is intended for file systems and the like. It will be comfortable with thousands of nodes but is not virtualized and not intended for use with massive data sets. \n\n### Install\n\n`npm i @mpkelly/react-tree`\n\n### Demos\n\n- [File browser demo](https://codesandbox.io/s/fervent-wave-u7psb?file=/src/file-browser/FileBrowser.tsx)\n- Lazy children demo\n- [Journal example](https://github.com/mpkelly/Journal/blob/ab927cb481f60459d50a58012b89795aa33bfa47/packages/journal/src/features/collections-tree/CollectionsTree.tsx#L39)\n\n### Features\n\n- [x] Tiny bundle size - 5.8kB gzipped\n- [x] TypeScript \u0026 JavaScript support\n- [x] Basic drag \u0026 drop support\n- [x] Simple list data model\n- [x] Support for toggling expand/collapse\n- [x] Custom sorting functions\n- [x] Simple, declarative Schema\n- [x] Exports utilities for working with nodes\n- [x] Multi-select and multi-drag and drop\n- [x] Keyboard support, including navigating, selecting, copying/cutting and pasting\n- [x] Implement W3C's [Tree View accessibility specification](https://www.w3.org/TR/wai-aria-practices/#TreeView)\n- [ ] Dropping at precise locations in target\n\nI wrote this for [Journal](https://github.com/mpkelly/Journal), another side-project of mine, and didn't need to drop a precise locations but may add this in future.\n\n### Quick Start\n\n\n\n```TypeScript\n\n// Use `ScrollableTree` which wraps the `Tree` in a scroll container \n// but also fixes various scrolling/focusing quirks. \n\nimport {ScrollableTree as Tree} from \"@mpkelly/react-tree\";\n\n\u003cTree\n  nodes={nodes}\n  schema={FileSystemSchema}\n  renderElement={renderElement}\n  onChange={handleChange}\n  onPaste={handlePaste}\n  nameProperty=\"name\"\n/\u003e\n```\n\n### API\n\n#### Nodes\n\nTo make use of the tree you just need to provide an array of [FlatNodes](https://github.com/mpkelly/react-tree/blob/master/packages/react-tree/src/Node.ts).\n\n```TypeScript\n\nexport type NodeId = string | number;\nexport type NodeType = string | number;\n\nexport interface Node {\n  id: NodeId;\n  type: NodeType;\n  expanded?: boolean;\n  dragDisabled?:boolean;\n  [key: string]: any;\n}\n\nexport interface FlatNode extends Node {\n  parentId?: NodeId;\n}\n\n```\n\nThe key thing is that the Node has an `id` prop and, unless it's a root node, a `parentId` so that the library can construct a tree from it. Internally, `react-tree` converts your nodes into `TreeNodes` which it uses to render the tree.\n\n#### Schema\n\nMost trees will have some constraints and will require a `Schema`. React Tree has some built-in checks, for example, not allowing a parent to be dropped into a child, but you will typically need others and that's where the [Schema](https://github.com/mpkelly/react-tree/blob/master/packages/react-tree/src/Schema.ts) comes in. If your tree is for a file system, a Schema might look something like this:\n\n```TypeScript\nenum Type {\n  File,\n  Folder,\n}\n\nconst FileSystemSchema: Schema = {\n  rules: {\n      //a folder accepts folders and files\n      [Type.Folder]: [Type.Folder, Type.File],\n\n      //empty array = accepts nothing\n      [Type.File]: [],\n  }\n};\n\n```\n\nYou would then declare your nodes like this:\n\n```TypeScript\nconst flatNodes: FlatNode[] = [\n  {\n    id: 1,\n    expanded: true,\n    type: Type.Folder,\n    \n    //Note how FlatNode supports arbitrary properties\n    name: \"Folder one\",\n  },\n  {\n    id: 2,\n    type: Type.File,\n    parentId: 1,\n    name: \"File one\",\n  },\n```\n\n(a folder with one child of type file)\n\nIf you need to do more advanced validation that can't be easily described by simple type mapping then you can add a `isDropAllowed(dragNode, dropNode)` to your Schema object. This function is called after the internal sanity checks and rule checks are passed.\n\n#### Expand / collapse\n\nReact Tree has a small helper component that helps you deal with toggling a node expanded/collapsed. It accepts any valid `ReactNode` as children as well as the `Node` being rendered. It is also accessible and uses `aria` attributes and responds to the `space` key. You can see the demos above for how to make use of this fully but the basic usage looks like:\n\n```TypeScript\nconst FolderElement = (props: TreeElementProps) =\u003e {\n  const { node, depth } = props;\n  return (\n    \u003cdiv className=\"my-folder-item\" style={{ paddingLeft: depth * 16 }}\u003e\n      \u003cCollapseToggle node={node}\u003e\n        \u003cArrowIcon /\u003e\n      \u003c/CollapseToggle\u003e\n       \u003cspan data-element-name\u003e{node.name}\u003c/span\u003e\n    \u003c/div\u003e\n  );\n};\n\n```\n\n#### Styling\n\nReact Tree doesn't provide styling because it doesn't render anything visible by itself but it does set some data attributes on wrapper elements. Here's some styling from one of the examples:\n\n```CSS\n \n// This attribute is set on a node when another node that it can accept as a child is dragged over it - you will want to use some visual indicator so the user knows they can release\n[data-rt-drop-valid] {\n  background-color: rgba(0, 0, 0, .1);\n}\n\n// Set on nodes which have been selected by clicking to using cursor.\n// More than one node can be selected unless `disableMultipleSelection` is set.\n[data-rt-selected] {\n  background-color: rgba(0, 0, 0, .2);\n}\n\n// Attribute added to nodes that have been cut (ctrl+x) but not yet pasted\n[data-rt-cut] {\n  opacity: .4\n}\n\n// Attribute added to nodes that have been copied (ctrl+c) but not yet pasted\n[data-rt-copied] {\n  background-color: rgba(0, 0, 0, .05);\n}\n\n// Applied to the \u003cTreeElement/\u003e wrapper `div` which wraps the UI you render for each Node with `renderElement`\n// This wrapper will include child \u003cTreeElement/\u003es  if present\n[data-rt-element-wrapper] {\n\n}\n\n// Applied to a single \u003cTreeElement/\u003e that you render for each Node with `renderElement`\n[data-rt-element] {\n\n}\n\n// Output on the above wrappper allowing you target specific types\n[data-rt-type=\"type\"] {\n\n}\n\n// set on the \u003cCollapseToggle/\u003e wrapper with value true or false according to `Node.expanded`\n[data-rt-collapsed=\"false\"] {\n  transform: rotate(90deg);\n}\n\n// always set on the \u003cCollapseToggle/\u003e wrapper element\n[data-rt-collapse-toggle] {\n  transition: transform .3s;\n}\n\n```\n\n#### Deleting a node and all of its children\n\nReact Tree also exports some utilities that can help you delete a `FlatNode` and its children. An example:\n\n```TypeScript\nimport {toTreeNodes, toFlatNodes, findTreeNodeById} from \"@mpkelly/react-tree\"\n...\n\n//Construct a tree from `FlatNode` array\nconst tree = toTreeNodes(nodes);\n\n// Find the Node we want to delete - returns {node, parent}\nconst result = findTreeNodeById(idToDelete, tree);\n\nif (result \u0026\u0026 result.node) {\n\n  //Convert the sub-tree to a flat array and then convert that to an array of ids\n  const ids = toFlatNodes([result.node]).map((node) =\u003e node.id);\n \n  // Now just call your DB or API to delete them\n  deleteAllById(ids);\n}\n\n```\n\n#### Tree\n\nView the full [Tree API](https://github.com/mpkelly/react-tree/blob/master/packages/react-tree/src/Tree.tsx).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpkelly%2Freact-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpkelly%2Freact-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpkelly%2Freact-tree/lists"}