charcell 0.1.0
navigation
linksgithubnpm
mode

Tree

nested rows joined by drawn lines. groups fold, and a row can be a link.

usage

example

code

import { Tree, TreeGroup, TreeItem } from 'charcell/react';

export function TreeExample() {
  return (
    <Tree>
      <TreeGroup label="highway 9" root>
        <TreeItem label="kickstand" current />
        <TreeItem label="melonweed" />
        <TreeItem label="mink ranch" />
        <TreeGroup label="the gorge" defaultOpen={false}>
          <TreeItem label="tourist stop" />
          <TreeItem label="ricky's ramp" />
          <TreeItem label="ex-bridge" />
        </TreeGroup>
        <TreeItem label="smash-a-torium" />
        <TreeItem label="corley motors" />
      </TreeGroup>
    </Tree>
  );
}

as text

at rest
 highway 9      [–]
 ├─ kickstand       
 ├─ melonweed
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors
summary hover
 highway 9      [–] 
 ├─ kickstand       
 ├─ melonweed
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors
tree item current hover
 highway 9      [–]
 ├─ kickstand       
 ├─ melonweed
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors
tree item hover
 highway 9      [–]
 ├─ kickstand       
 ├─ melonweed       
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors
summary focus
❯highway 9      [–]
 ├─ kickstand       
 ├─ melonweed
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors
tree item focus
 highway 9      [–]
 ├─❯kickstand       
 ├─ melonweed
 ├─ mink ranch
 ├─ the gorge   [+]
 ├─ smash-a-torium
 └─ corley motors

props

Tree

spaciousboolean
Gives each row two, its label in the first: a 32px target, which meets WCAG 2.5.8. One-row rows miss it.
disclosure'brackets' | 'triangle'= 'brackets'
How a group marks its open state: brackets, [–] and [+], or triangle, ▾ and ▸.
disclosurePosition'end' | 'label' | 'start'= 'end'
Where a group's mark sits: at the row's end, a cell in from its edge; right after the label; or at the start, before the label, which indents a group's label past its sibling rows'.

TreeGroup

labelstring
The folder row's text.
defaultOpenboolean= true
The initial open state; the group owns it from there.
openboolean
The open state, held by the consumer; pair it with onOpenChange.
binds with v-model:open in vue, bind:open in svelte
onOpenChange(open: boolean) => void
Called with the new open state when the group opens or closes.
rootboolean
The top-level section: a bold label row.
collapsibleboolean= true
false keeps the section open, with no glyph and nothing to press.

it also takes any other attribute of its <div>.

TreeItem

labelstring
The row's text; a long one ellipsizes.
hrefstring
A row that navigates: the row is a link to it instead of a button.
currentboolean
The current row: inverted, and aria-current (page on a link, location on a link into the same page).
rootboolean
The bold variant for a top-level entry.
onClick(event: MouseEvent) => void
Called with the click event.

it also takes any other attribute of its <button>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

Tree

default
The tree's rows: TreeGroups and TreeItems, nested as deep as they go.

TreeGroup

summary
Content on the group's row after label, such as a count.
default
The group's rows, under its own.

TreeItem

default
Content after label, or the row's whole content without one.