{"id":18081379,"url":"https://github.com/adamkleingit/react-rich-tree","last_synced_at":"2025-04-12T14:54:40.167Z","repository":{"id":57343694,"uuid":"104666895","full_name":"adamkleingit/react-rich-tree","owner":"adamkleingit","description":"[Not Maintained] A simple yet powerful tree component for React","archived":false,"fork":false,"pushed_at":"2018-11-20T15:32:47.000Z","size":219,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T10:18:08.284Z","etag":null,"topics":["component","react","react-component","reactjs","tree","tree-component","tree-view","treeview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adamkleingit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-24T18:30:44.000Z","updated_at":"2024-07-07T17:30:33.000Z","dependencies_parsed_at":"2022-09-12T07:00:38.991Z","dependency_job_id":null,"html_url":"https://github.com/adamkleingit/react-rich-tree","commit_stats":null,"previous_names":["500tech/react-rich-tree"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamkleingit%2Freact-rich-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamkleingit%2Freact-rich-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamkleingit%2Freact-rich-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamkleingit%2Freact-rich-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adamkleingit","download_url":"https://codeload.github.com/adamkleingit/react-rich-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586239,"owners_count":21128995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["component","react","react-component","reactjs","tree","tree-component","tree-view","treeview"],"created_at":"2024-10-31T13:14:28.100Z","updated_at":"2025-04-12T14:54:40.146Z","avatar_url":"https://github.com/adamkleingit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Rich Tree\n\n## Not maintained\nThis project is not currently maintained. Feel free to fork it and use it for your needs.\n\n## A full featured tree component for React\nWe've built so many projects that required a tree component, and could never find a library that supported all features.\nAnd building your own tree component is not an easy task.\n\nSo, we decided to build one for React, with all the features you can think of:\n* Simple to use\n* Well Documented\n* Customizable \u0026 Extensible (override field names, custom templates, etc...)\n* Keyboard navigation\n* Async data\n* Drag \u0026 Drop\n* Select \u0026 Multiselect\n* Filtering\n* Virtual Scrolling\n* Save \u0026 restore tree state\n* Event callbacks\n* API for accessing \u0026 altering the tree state\n* Easily styled (comes with very minimal styling)\n\n## Getting started\n`npm i -S react-rich-tree`\n\n```\nimport { Tree } from 'react-rich-tree';\n\nnodes = [{\n  id: 1,\n  name: 'root',\n  children: [{\n    id: 2,\n    name: 'child'\n  }, {\n    id: 4,\n    name: 'child2'\n  }]\n}, {\n  id: 5,\n  name: 'root2'\n}];\n\noptions = {}\n\nonEvent = (event) =\u003e console.log(event)\n\n\u003cTree nodes={ nodes } options={ options } onEvent={ onEvent }/\u003e\n\n```\n\n## Full example\n```\nimport { Tree, TreeNode, TreeModel, KEYS, TREE_ACTIONS } from 'react-rich-tree';\n\nnodes = [{\n  id: 1,\n  name: 'root',\n  type: 'folder',\n  children: [{\n    id: 2,\n    type: 'file',\n    name: 'child'\n  }, {\n    id: 4,\n    type: 'file',\n    name: 'child2'\n  }]\n}, {\n  id: 5,\n  type: 'folder',\n  name: 'root2',\n  hasChildren: true // async\n}];\n\noptions = {\n  childrenField: 'children',\n  displayField: 'name',\n  idField: 'id',\n  getChildren: (node: TreeNode) =\u003e http.get(`/children/${node.id}`), // async load children - to be used with `hasChildren` property on the node\n  actionMapping: { // override key and mouse actions\n    mouse: {\n      click: TREE_ACTIONS.TOGGLE_SELECTED,\n      dblClick: (tree: TreeModel, node: TreeNode, $event: any) =\u003e node.toggleExpanded(),\n      contextMenu: null,\n      expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,\n      drop: TREE_ACTIONS.MOVE_NODE\n    },\n    keys: {\n      [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,\n      [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,\n      [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,\n      [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,\n      [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,\n      [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED\n    }\n  },\n  allowDrag: (node: TreeNode) =\u003e node.isLeaf, // boolean or function. isLeaf is a function on TreeNode wrapper class\n  allowDrop: (node: TreeNode) =\u003e node.data.type === 'folder', // data is the original data supplied by nodes\n  levelPadding: 4, // to be used for whole row selection (instead of putting padding on children)\n  nodeClass: (node: TreeNode) =\u003e node.type, // for styling\n  useVirtualScroll: true,\n  nodeHeight: 30,\n  dropSlotHeight: 3,\n  animateExpand: true,\n  animateSpeed: 50,\n  animateAcceleration: 1.1,\n  scrollOnSelect: true,\n  getNodeClone: (node: TreeNode) =\u003e ({ ...node.data, id: uuid.v4() }), // for dragging with ctrl pressed\n  TreeNodeComponent: ({ node }) =\u003e \u003cspan\u003e{ node.data.name } ({node.children.length})\u003c/span\u003e,\n  TreeNodeWrapperComponent: MyCustomNodeWrapper, // a component class that extends NodeWrapper component (or replaces it)\n  TreeNodeFullComponent: MyCustomFullNode, // a component class that extends Node component (or replaces it)\n  LoadingComponent: ({ node }) =\u003e \u003cimg src=\"loading.gif\"/\u003e\n}\n\n\u003cTree\n  nodes={ nodes }\n  options={ options }\n  onToggleExpanded={ onToggleExpanded }\n  onActivate={ onActivate }\n  onDeactivate={ onDeactivate }\n  onFocus={ onFocus }\n  onBlur={ onBlur }\n  onInitialized={ onInitialized }\n  onUpdateData={ onUpdateData }\n  onMoveNode={ onMoveNode }\n  onCopyNode={ onCopyNode }\n  onEvent={ onEvent }\n  onLoadNodeChildren={ onLoadNodeChildren }\n  onChangeFilter={ onChangeFilter }\n  onStateChange={ onStateChange }\n/\u003e\n\n```\n\n## Storybook\ncoming soon\n\n## Docs\ncoming soon\n\n## What's next\nWe would always love to hear suggestions for features \u0026 improvements - just open an issue.\n\nSome things on our mind down the road:\n* Context menu\n* Checkbox \u0026 master checkbox support\n* Add Demo \u0026 StoryBook\n* Add Tests\n\n## Contributing\nRun once:\n`npm run setup`\n\nRun after changing code:\n`npm run build`\n`npm run start:example`\n\nPlease check the issues / project before starting to work on a feature / bug to make sure it's not already in progress.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamkleingit%2Freact-rich-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamkleingit%2Freact-rich-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamkleingit%2Freact-rich-tree/lists"}