@layerok/react-headless-treeview

React headdless treeview

Installation

yarn add @layerok/react-headless-treeview

Usage

<HeadlessTreeView.Provider>
  <HeadlessTreeView.Item id="1">
    <HeadlessTreeView.ItemTrigger>
      <HeadlessTreeView.ItemIcon>Item 1 icon</HeadlessTreeView.ItemIcon>
      <HeadlessTreeView.ItemText>Item 1</HeadlessTreeView.ItemText>
      <HeadlessTreeView.ExpandIcon>
        <Icon.CaretDown />
      </HeadlessTreeView.ExpandIcon>
    </HeadlessTreeView.ItemTrigger>
    <HeadlessTreeView.SubList>
      <HeadlessTreeView.Item id="1-1">
        <HeadlessTreeView.ItemTrigger>
          <HeadlessTreeView.ItemIcon>Sub item icon</HeadlessTreeView.ItemIcon>
          <HeadlessTreeView.ItemText>Sub item</HeadlessTreeView.ItemText>
          <HeadlessTreeView.ExpandIcon>
            <Icon.CaretDown />
          </HeadlessTreeView.ExpandIcon>
        </HeadlessTreeView.ItemTrigger>
      </HeadlessTreeView.Item>
    </HeadlessTreeView.SubList>
  </HeadlessTreeView.Item>
  <HeadlessTreeView.Item id="2">
    <HeadlessTreeView.ItemIcon>Item 2 icon</HeadlessTreeView.ItemIcon>
    <HeadlessTreeView.ItemText>Item 2</HeadlessTreeView.ItemText>
  </HeadlessTreeView.Item>
</HeadlessTreeView.Provider>

Examples

Sidebar Menu