Fluxo UIFluxo UIv0.1.1

TreeView

A hierarchical tree component with expand/collapse, checkbox selection, async loading, drag-and-drop, and keyboard navigation.

Basic Usage

File Explorer Tree

A basic tree view with expandable folders and selectable nodes.

Documents
import { TreeView } from 'fluxo-ui';
import type { TreeNode } from 'fluxo-ui';

const nodes: TreeNode[] = [
  {
    id: 'docs',
    label: 'Documents',
    children: [
      {
        id: 'work',
        label: 'Work',
        children: [
          { id: 'resume', label: 'Resume.pdf', isLeaf: true },
          { id: 'cover', label: 'CoverLetter.docx', isLeaf: true },
        ],
      },
    ],
  },
  {
    id: 'photos',
    label: 'Photos',
    children: [
      { id: 'vacation', label: 'Vacation.jpg', isLeaf: true },
    ],
  },
];

<TreeView
  nodes={nodes}
  defaultExpandedKeys={new Set(['docs'])}
  onSelect={(keys, node) => console.log('Selected:', node.label)}
/>

Checkbox Mode

Enable checkboxes to add tri-state checkboxes. Parent nodes automatically reflect partial or full selection.

Checkbox Tree

Tree with tri-state checkboxes for permission management. Parent nodes show indeterminate state when partially checked.

Permissions
User Management
View Users
Create Users
Edit Users
Delete Users
Role Management
View Roles
Create Roles
Edit Roles
import { TreeView } from 'fluxo-ui';
import type { TreeNode } from 'fluxo-ui';

<TreeView
  nodes={nodes}
  checkboxes
  defaultExpandedKeys={new Set(['permissions', 'users'])}
  onCheck={(keys, node) => console.log('Checked:', [...keys])}
/>

Async Loading

Provide a loadChildren function to lazily fetch child nodes when expanding a branch for the first time.

Async Loading

Nodes load their children lazily when expanded. A spinner is shown during loading.

Static File.txt
import { TreeView } from 'fluxo-ui';
import type { TreeNode } from 'fluxo-ui';

const loadChildren = (node: TreeNode): Promise<TreeNode[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: `${node.id}-child-1`, label: 'Child 1', isLeaf: true },
        { id: `${node.id}-child-2`, label: 'Child 2', isLeaf: true },
        { id: `${node.id}-sub`, label: 'Subfolder' },
      ]);
    }, 1200);
  });
};

<TreeView
  nodes={nodes}
  loadChildren={loadChildren}
/>

Drag & Drop

Enable draggable to allow rearranging nodes via drag and drop.

Drag and Drop

Drag nodes to reorder or move them into other folders. Drop positions: before, inside, or after.

src
components
Button.tsx
Modal.tsx
Input.tsx
hooks
useState.ts
useEffect.ts
App.tsx
main.tsx
import { TreeView } from 'fluxo-ui';
import type { TreeNode, DragDropInfo } from 'fluxo-ui';

<TreeView
  nodes={nodes}
  draggable
  defaultExpandedKeys={new Set(['src', 'components'])}
  onDragDrop={(info: DragDropInfo) => {
    console.log('Dragged:', info.dragNode.label);
    console.log('Dropped on:', info.dropNode.label);
    console.log('Position:', info.dropPosition);
  }}
/>

Import

import { TreeView } from 'fluxo-ui';
import type { TreeNode, TreeViewProps, DragDropInfo } from 'fluxo-ui';

TreeView Props

nodesreq
TreeNode[]

Array of tree node data.

expandedKeys
Set<string>

Controlled set of expanded node IDs.

selectedKeys
Set<string>

Controlled set of selected node IDs.

checkedKeys
Set<string>

Controlled set of checked node IDs.

defaultExpandedKeys
Set<string>

Initially expanded node IDs (uncontrolled).

selectionMode
'single' | 'multiple' | 'none'"'single'"

Node selection behavior.

checkboxes
boolean"false"

Show tri-state checkboxes on each node.

draggable
boolean"false"

Enable drag-and-drop reordering.

loadChildren
(node: TreeNode) => Promise<TreeNode[]>

Async function to load children on expand.

onExpand
(keys: Set<string>, node: TreeNode) => void

Called when a node is expanded or collapsed.

onSelect
(keys: Set<string>, node: TreeNode) => void

Called when a node is selected.

onCheck
(keys: Set<string>, node: TreeNode) => void

Called when a node checkbox is toggled.

onDragDrop
(info: DragDropInfo) => void

Called when a node is dropped after dragging.

className
string

Additional CSS class for the tree container.

nodeTemplate
(node: TreeNode) => ReactNode

Custom render function for node content.

filterText
string

Filter string to show only matching nodes.

TreeNode Interface

idreq
string

Unique identifier for the node.

labelreq
string

Display text for the node.

icon
ReactNode

Icon displayed next to the label.

children
TreeNode[]

Child nodes (makes this a branch node).

isLeaf
boolean

Mark as leaf to prevent expand toggle when no children.

disabled
boolean

Disable selection and checkbox for this node.

data
Record<string, unknown>

Custom data attached to the node.

Features

Expand/Collapse

Click to expand or collapse branch nodes with smooth transitions.

Tri-State Checkboxes

Parent nodes auto-compute checked, unchecked, or indeterminate state.

Async Loading

Lazily load children via an async function when a node is first expanded.

Drag & Drop

Reorder nodes by dragging them before, inside, or after other nodes.

Keyboard Navigation

Arrow keys, Home, and End for full keyboard accessibility.

Filter / Search

Pass filterText to show only matching nodes and their ancestors.