React-directory-view NPM

React Directory View

You no longer need to write your recursion yourself. Just import the Tree component and supply treeData and treeMap props.

How to use

Import the Tree Component, and specify treeMap and treeData props.

const App = () => (
  <Tree
    treeData={treeData}
    treeMap={treeMapping}
  />
);

The treeMap prop is just an object containing the configuration for your tree. An example below:

const treeMapping = {
  /**
    * {string=}
    * recursiveKey is the key on your object tree which
    * the tree structure recursively maps over. By
    * default it looks for 'children'.
    */
  recursiveKey: 'children',
  /**
    * {string}
    * The React key given to each JSX node for dom comparison.
    */
  nodeKey: 'id',
  /**
    * {string=}
    * If a component isn't given to treeMapping, then
    * the 'childToRender' is rendered for each node in the tree.
    * This relates to the treeData you're passing to the Tree component.
    */
  childToRender: 'path',
};

A basic example could like below:

import React, { Fragment } from 'react';
import Tree from './components/Tree';
import ExampleComponent from './components/ExampleComponent';

const treeMapping = {
  recursiveKey: 'children', // recursiveKey is set to 'children' by default
  nodeKey: 'id',
  childToRender: 'path',
};

const treeData = [
  {
    path: 'this',
    id: 1,
    children: [
      {
        path: 'is',
        id: 2,
        children: [
          {
            path: 'a',
            id: 3,
            children: [
              {
                path: 'few',
                id: 4,
                children: [
                  {
                    path: 'deep',
                    id: 5,
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

const App = () => (
  <Fragment>
    <Tree
      treeData={treeData}
      treeMap={treeMapping}
    />
  </Fragment>
);

This will render a tree that looks like:

> This
  > Is
    > A
      > Few
        Deep

Props

Prop	Default	required	Description
treeData	Empty array	Yes	The data to recursively map over
treeMap	Empty object	Yes	Describes the nodes / keys to use when mapping over each child array
useCheckbox	False	No	Wether to use checkboxes or not
checkboxStyles	Empty object	No	Style object used to add or override checkbox styles
arrowStyles	empty object	No	Style object used to add or override arrow styles
Component	None	No	A component to render for each node in the object tree. Receives all props from the treeNode.
paddingLeft	15px	No	The amount of padding to add for each child
onContract	noOp	No	Callback to be invoked every time a child node is collapsed
onExpand	noOp	No	Callback to be invoked every time a child node is expanded