React Tree List

• 1. Overview
• 2. Installation
• 3. List format
• 3. <DropDown/>
  • Example usage
    • React
    • CSS file
  • Props description
• 4. <TreeList/>
  • Example usage
    • React
    • CSS file
  • Props description
• 5. Contributing
• 6. License
• 7. Contact

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

7. License

Distributed under the MIT License. See LICENSE.txt for more information.

8. Contact

Dimos - Spiridon Dimou - Linkedin - [email protected]

Project Link: React Tree List