Headless Tree

https://headless-tree.lukasbach.com/docs

Admin

Headless Tree is a definitive, fully customizable, and accessible tree component for the Web,...

Tokens:585

Snippets:12

Trust Score:6.9

Update:3 months ago

Show doc for...

Tokens:

Raw

### Simple React Tree Example

Source: https://headless-tree.lukasbach.com

Demonstrates basic integration of the Headless Tree component in React. It initializes the tree with an expanded item and defines data loading and item display logic. Use this for a straightforward tree implementation.

```javascript
export const SimpleExample = () => {
  const tree = useTree<string>({
    initialState: { expandedItems: ["folder-1"] },
    rootItemId: "folder",
    getItemName: (item) => item.getItemData(),
    isItemFolder: (item) => !item.getItemData().endsWith("item"),
    dataLoader: {
      getItem: (itemId) => itemId,
      getChildren: (itemId) => [
        `${itemId}-1`,
        `${itemId}-2`,
        `${itemId}-3`,
        `${itemId}-1item`,
        `${itemId}-2item`,
      ],
    },
    indent: 20,
    features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
  });


  return (
    <div {...tree.getContainerProps()} className="tree">
      {tree.getItems().map((item) => (
        <button
          {...item.getProps()}
          key={item.getId()}
          style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
        >
          <div
            className={cn("treeitem", {
              focused: item.isFocused(),
              expanded: item.isExpanded(),
              selected: item.isSelected(),
              folder: item.isFolder(),
            })}
          >
            {item.getItemName()}
          </div>
        </button>
      ))}
    </div>
  );
};

```

Tokens:

Raw