@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.

Expanded Property Optional

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

OnClick Property Optional

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

OrderBy Property Optional

orderBy is and object compose of two array.

ItemSize Property Optional

itemSize is the size of each element.

Row Property Optional

Row is react component.

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