@o2xp/react-tree-view

!Build

@o2xp/react-tree-view is a modulable component to build tree view and more !

See a show case just here.

Table of Contents

- Getting Started
- Installing
- Prop Types
- Contributing
- Build With
- Contributors

Getting Started

$3

``sh
$ npm i --s @o2xp/react-tree-view
`

In your file :
`jsx
// ES6
import React, { useState } from "react";
import TreeView from "@o2xp/react-tree-view";

const data = [
{
children: [
{
children: [
{
id: "file_1_1_1",
label: "File 1-1-1"
},
{
id: "file_1_1_2",
label: "File 1-1-2"
}
],
id: "folder_1_1",
label: "Folder 1-1"
},
{
id: "folder_1_2",
label: "Folder 1-2"
}
],
id: "folder_1",
label: "Folder 1"
},
{
children: [
{
id: "folder_2_1",
label: "Folder 2-1"
}
],
id: "folder_2",
label: "Folder 2"
}
];

const App = () => {
return (

);
};

export default App;
`

Live implementation

To go further check all examples

$3

#### Data Property Required

data is an array compose of object with this structure.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| id | String | yes | An id that is uniq |
| label | String | yes | Label displayed |
| children | Array\ | no | And array of data type |
| | any | no | Any other data that you want in your node |

#### Expanded Property Optional

expand is an array of string containing ids of data element which are expanded.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| expand | Array\ | yes | Array of id |

#### OnClick Property Optional

onClick is a function taking data node as parameter and returning nothing.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| onClick | (dataNode) => void | yes | Triggered on data node click |

#### OrderBy Property Optional

orderBy is and object compose of two array.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| ids | Array\ | yes | Array composed of data node id |
| orders | Array\ | yes | Array composed of value "asc" or "desc", see lodash documentation |

#### ItemSize Property Optional

itemSize is the size of each element.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| itemSize | Number | yes | Size of element |

#### Row Property Optional

Row` is react component.

| Property | Type | Required? | Description |
|:---|:---:|:---:|:---|
| Row | React Component | yes | Used to overwrite default row element |

Contributing

Do you want to contribute to this project ? Great ! You can start by reading our contributing guide.

Build With

* react - A JavaScript library for building user interfaces
* rollup - Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the standardized ES module format for code, instead of previous idiosyncratic solutions such as CommonJS and AMD.
* memoize-one - A memoization library that only caches the result of the most recent arguments.
* react-window - React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

Contributors

* Morgan Dubois