OVERVIEW

This is a simple react tree component, created by Jose Miguel Chaves as a MallorcaBootCamp challenge.

This tree component it can be infinite, it's also collapsible. It will show an arrow where its children, if there's no children will not show anything.

INSTALLATION

npm i @josemichaves/react-tree-component

USAGE

import {TreeComponent} from "josemichaves@treecomponent"

In order to use this tree component you need to call the Tree Component, and pass an array of objects to display.

<TreeComponent data={data} />

The data should have this format:

[
  {
    name: 'Parent 1',
    children: [{ name: 'Children 1-1' }, { name: 'Children 1-2' }],
  },
  {
    name: 'Parent 2',
    children: [
      { name: 'Children 2-1' },
      { name: 'Children 2-2', children: [{ name: 'Children 2-2-1' }] },
    ],
  },
  {
    name: 'Parent 3',
    children: [
      {
        name: 'Children 3-1'
      },
    ],
  },
];

Right Content property

You can also pass an right content property to the array of objects that you want to be displayed, you can put JSX inside, and will show this JSX at the right of the entry.

[
  {
    name: 'Parent 3',
    rightContent: <img src="./image.png" alt="" />
    children: [
      {
        name: 'Children 3-1',
        rightContent: <span> I'm the children of Children 3-1 </span>,
      },
    ],
  },
];

Syntax

| Key | Value | Type | | ------------ | ------------------------------------------------------------------------ | ---------------- | | name | The name of the parent you want to display. | string | | children | An array of objects that will be displayed as children. | array of objects | | rightContent | JSX or whatever you need that can be displayed at the right of an entry. | JSX or string |

Testing

This Tree Component has unit testing built in, this tests ensure that this Tree Component will work in the way it should.

npm test

or

yarn test

OTHER SOURCES

You can give it a ★ in GitHub