ReactJS Blueprint Tree Component

Last Updated : 08 Sep, 2022

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Tree Component provides a way for users to display tree-structured data. It is used to show hierarchical data. We can use the following approach in ReactJS to use the ReactJS Blueprint Tree Component.

Tree Props:

className: It is used to denote a space-delimited list of class names to pass along to a child element.
contents: It is used to denote the data specifying the contents and appearance of the tree.
onNodeClick: It is a callback function that is triggered when a node is clicked anywhere other than the caret for expanding/collapsing the node.
onNodeCollapse: It is a callback function that is triggered when the caret of an expanded node is clicked.
onNodeContextMenu: It is a callback function that is triggered when a node is right-clicked or the context menu button is pressed on a focused node.
onNodeDoubleClick: It is a callback function that is triggered when a node is double-clicked.
onNodeExpand: It is a callback function that is triggered when the caret of a collapsed node is clicked.
onNodeMouseEnter: It is a callback function that is triggered when the mouse is moved over a node.
onNodeMouseLeave: It is a callback function that is triggered when the mouse is moved out of a node.

TreeNode Props:

childNodes: It is used to denote the child tree nodes of this node.
children: It is used to denote the children element.
className: It is used to denote a space-delimited list of class names to pass along to a child element.
contentRef: It is used to denote the content ref element.
depth: It is used to denote the depth of the nodes.
disabled: It is used to indicate whether this tree node is non-interactive.
hasCaret: It is used to indicate whether the caret to expand/collapse a node should be shown.
icon: It is used to denote the name of an icon or an icon element to render next to the node’s label.
id: It is used to denote a unique identifier for the node.
isExpanded: It is inherited from ITreeNode.isExpanded property.
isSelected: It is used to indicate whether this node is selected.
key: It is used to denote the unique key attribute.
label: It is used to denote the main label for the node.
nodeData: It is used to denote an optional custom user object to associate with the node.
onClick: It is a callback function that is triggered when the TreeNode is clicked.
onCollapse: It is a callback function that is triggered when the TreeNode collapses.
onContextMenu: It is a callback function that is triggered when the TreeNode is right-clicked or the context menu button is pressed on a focused TreeNode.
onDoubleClick: It is a callback function that is triggered when the user double-clicks the TreeNode.
onExpand: It is a callback function that is triggered when the TreeNode expands.
onMouseEnter: It is a callback function that is triggered when the mouse enters the TreeNode.
onMouseLeave:It is a callback function that is triggered when the mouse leaves the TreeNode.
path: It is used to denote the path attribute for the tree node.
secondaryLabel: It is used to denote a secondary label/component that is displayed on the right side of the node.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure: It will look like the following.

Project Structure

Example 1: Now write down the following code in the App.js file. Here we have demonstrated the Tree Component with the Icon element applied to it.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
 
function App() {
 
    // Sample Tree Data
    const sampleData = [
        {
            id: 0,
            hasCaret: true,
            icon: "folder-close",
            label: "Folders"
        },
        {
            id: 1,
            hasCaret: true,
            icon: "user",
            label: "Profile"
        },
        {
            id: 2,
            hasCaret: true,
            icon: "folder-close",
            label: "Documents"
        },
    ];
 
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
            />
        </div>
    );
}
 
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: Now write down the following code in the App.js file. Here, we have demonstrated the Tree Component without the Icon element applied to it.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
 
function App() {
 
    // Sample Tree Data
    const sampleData = [
        { id: 0, label: "Songs" },
        { id: 1, label: "Pictures" },
        { id: 2, label: "Calendar" },
        { id: 4, label: "Album" },
        { id: 5, label: "Themes" },
    ];
 
    return (
        <div style={{
            display: 'block', width: 300, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
            />
        </div>
    );
}
 
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 3: Now write down the following code in the App.js file. Here, Here we have demonstrated the Nested Tree Component which is expanded on click of the tree node.

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
 
function App() {
 
    const [isOpen, setIsOpen] = React.useState(false)
 
    // Sample Tree Data
    const sampleData = [
        {
            id: 5, label: "Click to expand Folders",
            isExpanded: isOpen,
            childNodes: [
                {
                    id: 0,
                    icon: "folder-close",
                    label: "Folders"
                },
                {
                    id: 1,
                    icon: "user",
                    label: "Profile"
                },
                {
                    id: 2,
                    icon: "folder-close",
                    label: "Documents"
                }
            ]
        },
    ];
 
    return (
        <div style={{
            display: 'block', width: 300, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
                onNodeClick={()=>setIsOpen(true)}
            />
        </div>
    );
}
 
export default App;