trees Skill

Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag and drop, icons, git status, and themes.

Install
npx skills add 'https://github.com/pierrecomputer/pierre/tree/main/skills/trees'
Download bundle ↓
View on GitHub
← Back to SKILL.md

React API

This reference lists every export from @pierre/trees/react.

ExportKindPurpose
FileTreeComponentMounts a FileTree model in a React host element.
FileTreePropsTypeDefines the model, header, context menu, preload data, and host props.
FileTreePreloadedDataTypeSelects the id and shadowHtml fields for hydration.
useFileTreeHookCreates one stable FileTree model.
UseFileTreeResultTypeHolds the model returned by useFileTree.
useFileTreeSelectionHookReturns the selected path list and updates with the model.
useFileTreeSearchHookReturns search state and search actions.
FileTreeSearchStateTypeDefines the search snapshot and actions.
useFileTreeSelectorHookSubscribes to a selected part of model state.
FileTreeSelectorTypeSelects a value from a model.
FileTreeSelectorEqualityTypeCompares two selected values.

FileTreeProps extends React host attributes except children. Its specific fields are:

FieldPurpose
modelSupplies the required FileTree model.
headerSupplies React content for the header slot.
renderContextMenuProduces React content for the active context menu.
preloadedDataSupplies server markup for hydration.
Referenced from SKILL.md