Table of Contents
Display hierarchical data in React in two ways dropdown list or tree grid view list. Has been developed in such a way as to give to the user freedom in styling the components
yarn add @spyreto/react-tree-list
# or
npm install @spyreto/react-tree-listconst toDoList = [
{
content: "Today:",
children: [
{
content: "Cooking:",
children: [
{
content: "Go to the grocery store:",
children: [
{
content: "Buy tomatoes"
},
{
content: "Buy potatoes"
}
],
}
],
}
]
},
{
content: "Tomorrow",
children: [
{
content: "Go to work",
},
{
content: "Go to the gym",
},
{
content: "Send the presentation to Homer",
},
],
},
.
.
.
];
import React from "react";
import { DropDownList } from "@spyreto/react-tree-list";
import "./App.css";
import data from "./data";
function App() {
return (
<div className="app">
<div className="drop-down-list-container">
<h1 className="header">My ToDo List</h1>
<DropDownList
className="drop-down-list"
innerListClass="inner-list"
innerListHeaderClass="inner-list-header"
firstItemClass="first-item"
listItemClass="list-item"
list={data}
iconOpenClass="open-icon"
iconCloseClass="close-icon"
/>
</div>
</div>
);
}
.drop-down-list-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 2.4rem;
border: 0.2rem solid #c7c7c7;
border-radius: 1.2rem;
}
.header {
align-self: center;
margin-top: 3.6rem;
font-size: 3.6rem;
color: black;
font-weight: 600;
}
.drop-down-list {
margin: 1.2rem 3.6rem;
list-style-type: none;
font-size: 1.6rem;
}
.inner-list {
list-style-type: none;
margin-left: 2.4rem;
}
.first-item,
.inner-list-header {
padding: 0.8rem 0;
font-weight: 600;
}
.first-item,
.list-item {
padding: 0.8rem 0;
}
.list-icon {
padding-right: 0.8rem;
width: 2.4rem;
color: #424242;
}
.close-icon,
.open-icon {
padding-right: 0.8rem;
width: 2.4rem;
color: #424242;
}
| Property | Type | Description | Default |
|---|---|---|---|
| list | array | List data | [] |
| className | string | Component class | "" |
| innerListHeaderClass | string | Nested list headings class (<li> ) |
"" |
| innerListClass | string | Nested list class (<ul> ) |
"" |
| firstItemClass | string | Main list items that do not have a nested list (<li> ) |
"" |
| listItemClass | string | List items class (<li> ) |
"" |
| iconOpenClass | string | Class of the open list icon | "" |
| iconCloseClass | string | Class of the close list icon | "" |
| content | elementType | Element in which to display the contents of the list | <li> "content" <li/> |
| openIcon | elementType | Open nested list icon | <FaArrowRight/> |
| closeIcon | elementType | Close nested list icon | <FaArrowDown/> |
import React from "react";
import { DropDownList } from "@spyreto/react-tree-list";
import { BsFillPencilFill } from "react-icons/bs";
import "./App.css";
import data from "./data";
function App() {
const listIcon = (props) => {
return (
<React.Fragment>
<BsFillPencilFill />
<span>{props.content}</span>
</React.Fragment>
);
};
return (
<div className="app">
<div className="tree-list-container">
<h1 className="header">My ToDo List</h1>
<TreeList
className="tree-list"
innerListClass="inner-list"
innerListHeaderClass="inner-list-header"
firstItemClass="first-item"
listItemClass="list-item"
list={data}
content={listIcon}
/>
</div>
</div>
);
}
.tree-list-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 2.4rem;
border: 0.2rem solid #c7c7c7;
border-radius: 1.2rem;
}
.header {
align-self: center;
margin-top: 3.6rem;
font-size: 3.6rem;
color: black;
font-weight: 600;
}
.tree-list {
margin: 1.2rem 3.6rem;
list-style-type: none;
font-size: 1.6rem;
}
.inner-list {
list-style-type: none;
margin-left: 2.4rem;
}
.first-item,
.inner-list-header {
padding: 0.8rem 0;
font-weight: 600;
}
.first-item,
.list-item {
padding: 0.8rem 0;
}
.list-icon {
padding-right: 0.8rem;
width: 2.4rem;
color: #424242;
}
| Property | Type | Description | Default |
|---|---|---|---|
| list | array | List data | [] |
| className | string | Component class | "" |
| innerListHeaderClass | string | Nested list headings class (<li> ) |
"" |
| innerListClass | string | Nested list class (<ul> ) |
"" |
| firstItemClass | string | Main list items that do not have a nested list (<li> ) |
"" |
| listItemClass | string | List items class (<li> ) |
"" |
| content | elementType | Element in which to display the contents of the list | <li> "content" <li/> |
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Dimos - Spiridon Dimou - Linkedin - spirosdimou22@gmail.com
Project Link: React Tree List