@o2xp/react-tree-view

@o2xp/react-tree-view

@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

Installing

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

In your file :

// 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 (
    <div style={{ height: "100vh", width: "100%" }}>
      <TreeView data={data} />
    </div>
  );
};

export default App;

Live implementation

To go further check all examples

Prop Types

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<data>	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<String>	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<String>	yes	Array composed of data node id
orders	Array<String>	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