# Tree A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection. ## Content `Tree` follows the [Collection Components API](collections.html?component=Tree), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a recursive function to render the children. ```tsx import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {Collection} from 'react-aria-components'; let items = [ {id: 1, title: 'Documents', type: 'directory', children: [ {id: 2, title: 'Project', type: 'directory', children: [ {id: 3, title: 'Weekly Report', type: 'file', children: []}, {id: 4, title: 'Budget', type: 'file', children: []} ]} ]}, {id: 5, title: 'Photos', type: 'directory', children: [ {id: 6, title: 'Image 1', type: 'file', children: []}, {id: 7, title: 'Image 2', type: 'file', children: []} ]} ]; {function renderItem(item) { return ( {/*- begin highlight -*/} {/* recursively render children */} {renderItem} {/*- end highlight -*/} ); }} ``` ### Asynchronous loading Use [renderEmptyState](#empty-state) to display a spinner during initial load. To enable infinite scrolling, render a `` at the end of each ``. Use whatever data fetching library you prefer – this example uses `useAsyncList` from `react-stately`. ```tsx import {Tree, TreeItem, TreeLoadMoreItem} from 'vanilla-starter/Tree'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; import {Collection} from 'react-aria-components'; import {useAsyncList} from 'react-stately'; interface Character { name: string } function AsyncLoadingExample() { let starWarsList = useAsyncList({ async load({signal, cursor}) { if (cursor) { cursor = cursor.replace(/^http:\/\//i, 'https://'); } let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal}); let json = await res.json(); return { items: json.results, cursor: json.next }; } }); let pokemonList = useAsyncList({ async load({signal, cursor, filterText}) { let res = await fetch( cursor || `https://pokeapi.co/api/v2/pokemon`, {signal} ); let json = await res.json(); return { items: json.results, cursor: json.next }; } }); return ( ( )}> {(item) => } {/*- begin highlight -*/} {/*- end highlight -*/} {(item) => } {/*- begin highlight -*/} {/*- end highlight -*/} ); } ``` ### Links Use the `href` prop on a `` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=Tree#selection-behavior) for more details. ```tsx import {Tree, TreeItem} from 'vanilla-starter/Tree'; ``` ### Empty state ```tsx import {Tree} from 'vanilla-starter/Tree'; 'No results found.'}> {[]} ``` ## Selection and actions Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection.html?component=Tree) for more details. ```tsx import type {Selection} from 'react-aria-components'; import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {useState} from 'react'; function Example(props) { let [selected, setSelected] = useState(new Set()); return (
alert(`Clicked ${key}`)} >

Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}

); } ``` ## Drag and drop Tree supports drag and drop interactions when the `dragAndDropHooks` prop is provided using the `useDragAndDrop` hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the [drag and drop guide](dnd.html?component=Tree) to learn more. ```tsx import {useTreeData} from 'react-stately'; import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {useDragAndDrop, Collection} from 'react-aria-components'; function Example() { let tree = useTreeData({ initialItems: [ {id: '1', title: 'Documents', type: 'directory', children: [ {id: '2', title: 'Project', type: 'directory', children: [ {id: '3', title: 'Weekly Report', type: 'file', children: []}, {id: '4', title: 'Budget', type: 'file', children: []} ]} ]}, {id: '5', title: 'Photos', type: 'directory', children: [ {id: '6', title: 'Image 1', type: 'file', children: []}, {id: '7', title: 'Image 2', type: 'file', children: []} ]} ] }); let {dragAndDropHooks} = useDragAndDrop({ getItems: (keys) => [...keys].map(key => ({'text/plain': tree.getItem(key).value.title})), onMove(e) { if (e.target.dropPosition === 'before') { tree.moveBefore(e.target.key, e.keys); } else if (e.target.dropPosition === 'after') { tree.moveAfter(e.target.key, e.keys); } else if (e.target.dropPosition === 'on') { // Move items to become children of the target let targetNode = tree.getItem(e.target.key); if (targetNode) { let targetIndex = targetNode.children ? targetNode.children.length : 0; let keyArray = Array.from(e.keys); for (let i = 0; i < keyArray.length; i++) { tree.move(keyArray[i], e.target.key, targetIndex + i); } } } } }); return ( {function renderItem(item) { return ( {renderItem} ) }} ); } ``` ## Examples ## API ```tsx