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