@spyreto/react-tree-list NPM

React Tree List

1. Overview

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

2. Installation

yarn add @spyreto/react-tree-list
# or
npm install @spyreto/react-tree-list

3. List format

const 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",
      },
    ],
  },
  .
  .
  .
];

4. `<DropDown/>`

Example usage

React

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>
  );
}

CSS file

.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;
}

Props description

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/>`

5. `<TreeList/>`

Example usage

React

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>
  );
}

CSS file

.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;
}

Props description

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/>`

6. Contributing

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!