React Tree.js

A highly customizable and flexible React Tree component library built with TypeScript. Perfect for file explorers, navigation menus, organizational charts, and any hierarchical data visualization.

Features

• 🎨 Fully Customizable: Custom icons, classes, and styling
• 🔧 TypeScript Support: Built with TypeScript for better development experience
• 🎯 Event Handling: Click, select, and toggle events
• 🌳 Hierarchical Data: Support for nested tree structures
• 📱 Responsive: Mobile-friendly design
• 🎪 Flexible Styling: CSS classes and custom components
• 🔍 Accessible: Keyboard navigation and screen reader support
• ⚡ Performance: Optimized rendering for large datasets

Installation

npm install react-tree-js

or

yarn add react-tree-js

Basic Usage

import React, { useState } from 'react';
import { Tree, TreeNode } from 'react-tree-js';

const data: TreeNode[] = [
  {
    id: 1,
    label: 'Root Folder',
    children: [
      {
        id: 2,
        label: 'Documents',
        children: [
          { id: 3, label: 'Report.pdf' },
          { id: 4, label: 'Presentation.pptx' },
        ],
      },
      {
        id: 5,
        label: 'Images',
        children: [
          { id: 6, label: 'photo1.jpg' },
          { id: 7, label: 'photo2.png' },
        ],
      },
    ],
  },
];

function MyComponent() {
  const [selectedNodeId, setSelectedNodeId] = useState();

  const handleNodeSelect = (node: TreeNode) => {
    setSelectedNodeId(node.id);
  };

  return (
    <Tree
      data={data}
      onNodeSelect={handleNodeSelect}
      selectedNodeId={selectedNodeId}
    />
  );
}

Advanced Usage

Custom Icons

import { FaFolder, FaFile, FaChevronRight, FaChevronDown } from 'react-icons/fa';

const FolderIcon = () => <FaFolder />;
const FileIcon = () => <FaFile />;

<Tree
  data={data}
  customExpandIcon={<FaChevronRight />}
  customCollapseIcon={<FaChevronDown />}
  customLeafIcon={<FileIcon />}
/>

Custom Styling

<Tree
  data={data}
  className="my-custom-tree"
  nodeClassName="my-node"
  labelClassName="my-label"
  iconClassName="my-icon"
/>

.my-custom-tree {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
}

.my-node {
  padding: 8px 12px;
  margin: 2px 0;
}

.my-node:hover {
  background-color: #e3f2fd;
}

.my-label {
  font-weight: 500;
  color: #1976d2;
}

Event Handling

const handleNodeClick = (node: TreeNode, event: React.MouseEvent) => {
  console.log('Clicked:', node.label);
};

const handleNodeToggle = (node: TreeNode, expanded: boolean) => {
  console.log(`${node.label} is now ${expanded ? 'expanded' : 'collapsed'}`);
};

<Tree
  data={data}
  onNodeClick={handleNodeClick}
  onNodeToggle={handleNodeToggle}
  onNodeSelect={handleNodeSelect}
/>

API Reference

Tree Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | data | TreeNode[] | required | Array of tree node data | | onNodeClick | (node: TreeNode, event: React.MouseEvent) => void | - | Called when a node is clicked | | onNodeToggle | (node: TreeNode, expanded: boolean) => void | - | Called when a node is expanded/collapsed | | onNodeSelect | (node: TreeNode) => void | - | Called when a node is selected | | selectedNodeId | string \| number | - | ID of currently selected node | | expandedNodeIds | (string \| number)[] | [] | Array of expanded node IDs | | className | string | - | CSS class for tree container | | nodeClassName | string | - | CSS class for tree nodes | | labelClassName | string | - | CSS class for node labels | | iconClassName | string | - | CSS class for node icons | | expandIconClassName | string | - | CSS class for expand icons | | collapseIconClassName | string | - | CSS class for collapse icons | | customExpandIcon | ReactNode | - | Custom expand icon component | | customCollapseIcon | ReactNode | - | Custom collapse icon component | | customLeafIcon | ReactNode | - | Custom leaf node icon component | | showLines | boolean | false | Show connecting lines between nodes | | showIcons | boolean | true | Show/hide node icons |

TreeNode Interface

interface TreeNode {
  id: string | number;           // Unique identifier
  label: string;                 // Display text
  children?: TreeNode[];         // Child nodes
  icon?: ReactNode;              // Custom icon for this node
  className?: string;            // Custom CSS class for this node
  data?: any;                    // Additional data
  expanded?: boolean;            // Initial expanded state
  disabled?: boolean;            // Disable interaction
}

Styling

The component comes with default CSS classes that you can override:

• .react-tree - Main tree container
• .react-tree__node - Individual node wrapper
• .react-tree__node-content - Node content area
• .react-tree__node-content.selected - Selected node state
• .react-tree__node-content.disabled - Disabled node state
• .react-tree__expand-icon - Expand/collapse icon
• .react-tree__node-icon - Node icon
• .react-tree__node-label - Node label text
• .react-tree__children - Children container

CSS Custom Properties

You can also use CSS custom properties for easy theming:

.react-tree {
  --tree-font-family: 'Inter', sans-serif;
  --tree-font-size: 14px;
  --tree-line-height: 1.5;
  --tree-node-padding: 8px 12px;
  --tree-node-border-radius: 6px;
  --tree-hover-bg: #f5f5f5;
  --tree-selected-bg: #e3f2fd;
  --tree-selected-color: #1976d2;
  --tree-disabled-opacity: 0.6;
}

Examples

Check out the /example directory for a complete demo with various configurations:

• Basic tree
• Tree with connecting lines
• Custom icons
• Custom styling
• Event handling

To run the example:

cd example
npm install
npm start

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © [Your Name]

Changelog

v1.0.0

• Initial release
• Basic tree functionality
• Custom icons support
• Event handling
• TypeScript support
• CSS customization