![\"Gmail](\"https://user-images.githubusercontent.com/3460638/197306119-59fe59e6-50ae-4bc2-8cb9-3faa2bc52cd2.gif\")
\n\n## Features\n\n- Drag and drop sorting\n- Open/close folders\n- Inline renaming\n- Virtualized rendering\n- Custom styling\n- Keyboard navigation\n- Aria attributes\n- Tree filtering\n- Selection synchronization\n- Callbacks (onScroll, onActivate, onSelect)\n- Controlled or uncontrolled trees\n\n## Installation\n\nreact-arborist requires `react-dnd` and `react-dnd-html5-backend` as peer\ndependencies. Install them together:\n\n```bash\nnpm install react-arborist react-dnd react-dnd-html5-backend\n```\n\n```bash\nyarn add react-arborist react-dnd react-dnd-html5-backend\n```\n\n## Examples\n\nAssume our data is this:\n\n```js\nconst data = [\n { id: \"1\", name: \"Unread\" },\n { id: \"2\", name: \"Threads\" },\n {\n id: \"3\",\n name: \"Chat Rooms\",\n children: [\n { id: \"c1\", name: \"General\" },\n { id: \"c2\", name: \"Random\" },\n { id: \"c3\", name: \"Open Source Projects\" },\n ],\n },\n {\n id: \"4\",\n name: \"Direct Messages\",\n children: [\n { id: \"d1\", name: \"Alice\" },\n { id: \"d2\", name: \"Bob\" },\n { id: \"d3\", name: \"Charlie\" },\n ],\n },\n];\n```\n\n### The Simplest Tree\n\nUse all the defaults. The _initialData_ prop makes the tree an uncontrolled component. Create, move, rename, and delete will be handled internally.\n\n```jsx\nimport { Tree } from 'react-arborist';\n\nfunction App() {\n return ![\"image\"](\"https://user-images.githubusercontent.com/3460638/198098015-d7dc6400-6391-4094-9f66-0f56a99433e9.png\")
\n\n[Demo](https://codesandbox.io/s/the-simplest-tree-7tbedw)\n\n### Customize the Appearance\n\nWe provide our own dimensions and our own `Node` component.\n\n```jsx\nfunction App() {\n return (\n \n {node.isLeaf ? \"🍁\" : \"🗀\"}\n {node.data.name}\n
\n );\n}\n```\n\n![\"image\"](\"https://user-images.githubusercontent.com/3460638/198100281-594a492d-2ea0-4ff0-883d-1dd79dbb5acd.png\")
\n\n[Demo](https://codesandbox.io/s/customize-appearance-f4g15v?file=/src/App.tsx)\n\n### Control the Tree data\n\nHere we use the _data_ prop to make the tree a controlled component. We must handle all the data modifications ourselves using the props below.\n\n```jsx\nfunction App() {\n /* Handle the data modifications outside the tree component */\n const onCreate = ({ parentId, index, type }) => {};\n const onRename = ({ id, name }) => {};\n const onMove = ({ dragIds, parentId, index }) => {};\n const onDelete = ({ ids }) => {};\n\n return (\n \n
\n```\n\n## API Reference\n\n- Components\n - [Tree Component Props](#tree-component-props)\n - [Row Component Props](#row-component-props)\n - [Node Component Props](#node-component-props)\n - [DragPreview Component Props](#dragpreview-component-props)\n - [Cursor Component Props](#cursor-component-props)\n- Interfaces\n - [Node API](#node-api-reference)\n - [Tree API](#tree-api-reference)\n- Utilities\n - [getTreeLinePrefix](#gettreelineprefix)\n\n## Tree Component Props\n\nThese are all the props you can pass to the Tree component.\n\n```ts\ninterface TreeProps\n {getTreeLinePrefix(node)}\n {node.data.name}\n
\n );\n}\n```\n\nPass a partial `chars` object to override any of the default characters (e.g. for an ASCII-only style).\n\n## Contributing\n\nThe package ships with Jest tests under `modules/react-arborist/src/**/*.test.ts?(x)`.\nFrom the package directory you can run:\n\n```bash\ncd modules/react-arborist\nyarn test\n```\n\nGood starting points:\n\n- `src/interfaces/tree-api.test.ts` for pure API behavior\n- `src/components/provider.test.tsx` for rendered tree behavior\n- `src/dnd/drag-hook.test.ts` for drag-and-drop behavior\n\n## Author\n\n[James Kerr](https://twitter.com/specialCaseDev) at [Brim Data](https://brimdata.io) for the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A).\n","readmeFilename":"README.md"}