Tree View Component in React JS
Last Updated :
26 Jul, 2024
Tree Views are commonly used to show organized lists, like folders in a computer or categories with sub-options. An icon indicates if an option is open or closed, and the related items are shown below, slightly indented. You often see this in website sidebars, like Gmail, to neatly display different choices and their sub-categories.
Prerequisites:
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app gfg
Step 2: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.
npm install @material-ui/core
npm install @material-ui/icons
npm install @material-ui/lab
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.0.0-alpha.61",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}TreeView component in Material-UI:
The TreeView component has some useful props:
- defaultCollapseIcon – To specify the icon used to collapse the node.
- defaultExpandIcon – To specify the icon used to expand the node.
- multiselect – A bool value which when true triggers multiselect upon pressing ctrl and shift.
Creating the Trees Component:
The GeeksforGeeks website has a sidebar menu in a tree-like structure with many sections like Home, Courses, Data Structures, Algorithms, etc. We’ll create a similar, smaller version to understand how to use the TreeView component.
The <TreeView> component is the topmost component in which the entire tree structure is defined.
<TreeView> </TreeView>
Each node is then defined using the TreeItem component which has two major props – a unique node id and a label. The label is where you can define what element would the node be, a button, a styled div, or a list item. Here we’ll use a list item.
<TreeItem nodeId="1" label={
<ListItem button component="a" href="#">
<ListItemText primary="Home" />
</ListItem>}>
</TreeItem>Example: We’ll create a small tree view like the one in the GeeksforGeeks website sidebar. Create a new file trees.js in the src folder where we’ll define our component.
JavaScript
//App.js
import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Trees from './trees';
class GFG extends Component {
render() {
return (
<React.Fragment>
<CssBaseline />
<Trees></Trees>
<br></br>
<Container maxWidth="sm">
<Typography component="h1" variant="h1"
align="center" gutterBottom>
Geeks for Geeks
</Typography>
<br />
<Typography component="h3" variant="h3"
align="center" gutterBottom>
TreeView Component
</Typography>
</Container>
</React.Fragment>
);
}
}
export default GFG;
import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Drawer from '@material-ui/core/Drawer';
import { useTheme } from '@material-ui/core/styles';
import { TreeView } from '@material-ui/lab';
import TreeItem from '@material-ui/lab/TreeItem';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
paddingTop: 5,
},
appbar: {
background: 'transparent',
boxShadow: 'none',
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9),
},
},
}));
export default function Trees() {
const theme = useTheme();
const classes = useStyles(theme);
const [open, setOpen] = React.useState(false);
function handleDrawer() {
setOpen(!open);
}
return (
<div className={classes.root}>
{/* AppBar part - Only contains a menu icon*/}
<AppBar position="static" color="primary" elevation={0}>
<Toolbar variant="dense">
{/* Menu icon onclick handler should open the drawer,
hence we change the state 'open' to true*/}
<IconButton edge="start"
style={{ color: theme.palette.secondary.icons }}
aria-label="menu" onClick={() => { handleDrawer() }}>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
{/* Drawer (can be placed anywhere in template) */}
<Drawer
variant="temporary"
classes={{
paper: clsx(classes.drawerPaper,
!open && classes.drawerPaperClose),
}}
open={open}>
<List>
<div>
{/* Tree Structure */}
<TreeView>
<TreeItem nodeId="1" label={
<ListItem button component="a" href="#">
<ListItemText primary="Home" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="2" label={
<ListItem button component="a" href="#">
<ListItemText primary="Data Structures" />
</ListItem>}>
<TreeItem nodeId="6" label={
<ListItem button component="a" href="#">
<ListItemText primary="Arrays" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="7" label={
<ListItem button component="a" href="#">
<ListItemText primary="Linked List" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="3" label={
<ListItem button component="a" href="#">
<ListItemText primary="Algortihms" />
</ListItem>}>
<TreeItem nodeId="8" label={
<ListItem button component="a" href="#">
<ListItemText primary="Searching" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="9" label={
<ListItem button component="a" href="#">
<ListItemText primary="Sorting" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="4" label={
<ListItem button component="a" href="#">
<ListItemText primary="Languages" />
</ListItem>}>
<TreeItem nodeId="10" label={
<ListItem button component="a" href="#">
<ListItemText primary="C++" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="11" label={
<ListItem button component="a" href="#">
<ListItemText primary="Java" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="12" label={
<ListItem button component="a" href="#">
<ListItemText primary="Python" />
</ListItem>}>
</TreeItem>
<TreeItem nodeId="13" label={
<ListItem button component="a" href="#">
<ListItemText primary="JavaScript" />
</ListItem>}>
</TreeItem>
</TreeItem>
<TreeItem nodeId="5" label={
<ListItem button component="a" href="#">
<ListItemText primary="GBlog" />
</ListItem>}></TreeItem>
</TreeView>
</div>
</List>
</Drawer>
{/* End-Drawer */}
</div>
);
}
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
Similar Reads
How to use TreeView Component in ReactJS ?
Explore the functionality of ReactJS's TreeView component, a powerful tool for seamlessly navigating and displaying hierarchical structures in web applications. This comprehensive guide delves into the integration process, empowering you to represent complex data relationships in an organized and us
2 min read
ReactJS UI Ant Design Tree Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Tree Component is used for a hierarchical list structure component. We can use the following approach in ReactJS to use the Ant Design Tree Component. Tree Props: allowDrop: It is used to indicate whether to a
5 min read
How to use List Component in ReactJS?
Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In
2 min read
How to use Skeleton Component in React JS ?
When data is not yet loaded, a Skeleton Component serves as a placeholder preview for the user. Material UI for React provides an easily integratable version of this component, and in React JS, the following approach can be employed to utilize the Skeleton Component.Prerequisites:React JSMaterial UI
2 min read
React Desktop macOS View Component
React Desktop is a popular library to bring the native desktop experience to the web. This library provides macOS and Windows OS components. View Component is used to allow the users to create a View. We can use the following approach in ReactJS to use the React Desktop macOS View Component. View Pr
2 min read
ReactJS Server Components
React is a JavaScript library which is used to develop frontend of websites. Since it's introduction in the year 2013 React has gained a lot of popularity among the web developers around the world. The library has a great support from the community and is evolving at a high speed from its launch. In
3 min read
ReactJS Reactstrap List Component
Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The List component allows the user to display a list. We can use the following approach in ReactJS to use the ReactJS Reactstrap List Comp
3 min read
React Components
In React, React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI.In this article, we will explore the basics of React components, props, state, and render
4 min read
ReactJS UI Ant Design TreeSelect Component
Ant Design Library has this component pre-built, and it is very easy to integrate as well. TreeSelect Component is used for the Tree selection control. It is similar to the Select component but here the values are provided in a tree-like structure. We can use the following approach in ReactJS to use
5 min read
How to Pass JSON Values into React Components ?
In React, you can pass JSON values into components using props. Props allow us to send data from a parent component to its child components. When rendering a component, you can pass the JSON values as props. These props can then be accessed within the component’s function or class, allowing you to d
3 min read