@bolttech/atoms-tree-view v0.2.0

TreeView Component

The TreeView component is a React component that provides a hierarchical structure for displaying nested items.

Table of Contents

• Installation
• Usage
• Props
  • TreeView Props
  • TreeViewItem Props
• Example
• Contributing

Installation

To use the TreeView component in your project, install the required dependencies:

npm @bolttech/atoms-tree-view

Usage

The TreeView component organizes content into a collapsible tree structure. It works in conjunction with TreeViewItem to represent individual nodes in the tree.

Basic Example

import React, { useState } from 'react';
import { TreeView, TreeViewItem } from '@bolttech/atoms-tree-view';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  const [selected, setSelected] = useState('');

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <TreeView arrowPosition="right" showLines={false} selected={selected}>
        <TreeViewItem label="Item 1" icon="star">
          <TreeViewItem onClick={setSelected}>
            <p>Item 1.1</p>
          </TreeViewItem>
          <TreeViewItem onClick={setSelected}>
            <p>Item 1.2</p>
          </TreeViewItem>
          <TreeViewItem label="Item 1.3">
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.1</p>
            </TreeViewItem>
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.2</p>
            </TreeViewItem>
            <TreeViewItem onClick={setSelected}>
              <p>Item 1.3.3</p>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
        <TreeViewItem label="Item 2">
          <TreeViewItem onClick={setSelected}>
            <p>Item 2.1</p>
          </TreeViewItem>
          <TreeViewItem label="Item 2.2">
            <TreeViewItem label="Item 2.2.1">
              <TreeViewItem onClick={setSelected}>
                <p>Item 2.2.1.1</p>
              </TreeViewItem>
            </TreeViewItem>
          </TreeViewItem>
        </TreeViewItem>
      </TreeView>
    </BolttechThemeProvider>
  );
}

export default App;

Props

TreeView Props

TreeIconType

TreeViewItem Props

Contributing

Contributions to the TreeView component are welcome! Please open an issue or submit a pull request on the project's repository if you find bugs or have feature suggestions.