@react-stately/tree

What is @react-stately/tree?

@react-stately/tree is a library for managing state in tree-like structures in React applications. It provides hooks and utilities to handle tree data, selection, expansion, and other common tree operations.

What are @react-stately/tree's main functionalities?

Tree Data Management

This feature allows you to manage tree data structures. The `useTreeState` hook initializes the tree state with the given tree data and selection mode.

import { useTreeState } from '@react-stately/tree';

const tree = {
  name: 'root',
  children: [
    { name: 'child 1' },
    { name: 'child 2', children: [{ name: 'grandchild 1' }] }
  ]
};

const state = useTreeState({
  tree,
  selectionMode: 'multiple'
});

console.log(state.collection);

Selection Management

This feature allows you to manage selection within the tree. The `selectionManager` provides methods to toggle selection and access selected keys.

import { useTreeState } from '@react-stately/tree';

const tree = {
  name: 'root',
  children: [
    { name: 'child 1' },
    { name: 'child 2', children: [{ name: 'grandchild 1' }] }
  ]
};

const state = useTreeState({
  tree,
  selectionMode: 'multiple'
});

state.selectionManager.toggleSelection('child 1');
console.log(state.selectionManager.selectedKeys);

Expansion Management

This feature allows you to manage the expansion state of tree nodes. The `expansionManager` provides methods to toggle expansion and access expanded keys.

import { useTreeState } from '@react-stately/tree';

const tree = {
  name: 'root',
  children: [
    { name: 'child 1' },
    { name: 'child 2', children: [{ name: 'grandchild 1' }] }
  ]
};

const state = useTreeState({
  tree,
  selectionMode: 'multiple'
});

state.expansionManager.toggleExpansion('child 2');
console.log(state.expansionManager.expandedKeys);

Other packages similar to @react-stately/tree

react-treebeard

react-treebeard is a React component for rendering tree structures. It provides a simple and customizable way to display hierarchical data. Unlike @react-stately/tree, it focuses more on rendering and less on state management.

react-sortable-tree

react-sortable-tree is a React component for displaying and sorting tree structures. It offers drag-and-drop functionality for rearranging nodes. Compared to @react-stately/tree, it provides more advanced interaction features but less focus on state management.

react-dnd-treeview

react-dnd-treeview is a React component for creating draggable and droppable tree views. It leverages the react-dnd library for drag-and-drop interactions. While it offers robust drag-and-drop capabilities, it does not provide the same level of state management as @react-stately/tree.

README

@react-stately/tree

This package is part of react-spectrum. See the repo for more details.