react.js-nested-tree

Description:

The react.js-nested-tree package is a versatile React component designed for creating nested, hierarchical tree structures. This package is especially useful for applications that require a visual representation of nested data, such as file explorers, category trees, or organizational charts.

Installation:

npm install react.js-nested-tree
# or
yarn add react.js-nested-tree

Key Features:

Declarative Approach: Allows developers to define tree structures using a simple and intuitive JSON format.
Dynamic Data Handling: Supports dynamic loading of tree nodes, making it suitable for large datasets or data fetched from remote sources.
Customizable Appearance: Provides options for customizing the appearance and behavior of tree nodes, including icons, styles, and animations.
Interactivity: Supports interactive features such as node selection, expansion, and collapse, making it user-friendly and interactive.
Performance Optimization: Designed with performance in mind, ensuring smooth operation even with complex and deeply nested structures.

Usage:

Props

The TreeProps interface defines the properties for the Tree component. Below is a detailed description of each property.

Property	Type	Description
`treeData`	`Item[]`	An array of `Item` objects representing the data for the tree structure.
`treeClassName`	`string`	(Optional) A class name to apply to the tree container element.
`itemClassName`	`string`	(Optional) A class name to apply to each tree item.
`subTreeClassName`	`string`	(Optional) A class name to apply to each sub-tree container.
`ItemComponent`	`React.ComponentType<TreeItem>`	A React component to render each tree item.
`subTreeStyle`	`React.CSSProperties`	(Optional) Inline styles to apply to each sub-tree container.
`parentTreeStyle`	`React.CSSProperties`	(Optional) Inline styles to apply to the parent tree container.
`treeItemStyle`	`React.CSSProperties`	(Optional) Inline styles to apply to each tree item.

Example

./App.tsx

import "./App.css";
import { TreeItems } from "./TreeItems";
import { Tree } from "react.js-nested-tree";
function App() {
  const treeData = [
    {
      id: 1,
      name: "Root Node",
      children: [
        {
          id: 2,
          name: "Child Node 1",
          children: [
            { id: 3, name: "Grandchild Node 1" },
            { id: 4, name: "Grandchild Node 2" },
          ],
        },
        { id: 5, name: "Child Node 2" },
      ],
    },
  ];
  return (
    <div>
      <Tree
        treeData={treeData}
        ItemComponent={TreeItems}
        parentTreeStyle={{ listStyleType: "none" }}
        treeItemStyle={{ listStyleType: "none" }}
      />
    </div>
  );
}

export default App;

API:

data: An array of objects representing the tree structure. Each object should have a unique id property. Optional children properties can be added for nested nodes.
Customization Options: Various props are available for customization, including node rendering functions, event handlers for node actions (e.g., onNodeClick, onNodeExpand), and styling options.

Conclusion:

The react.js-nested-tree package offers a robust solution for displaying hierarchical data in a React application. Its flexibility, ease of use, and performance optimizations make it an excellent choice for developers looking to implement nested tree structures with minimal hassle.

Demo

react-js-nested-tree-demo