react-rich-tree

500tech
esm Styles
react-rich-tree JS library on GitHub react-rich-tree JS library on npm Download react-rich-tree JS library

A feature-rich, extensible tree component for React

Version 0.1.1 License MIT
react-rich-tree has no homepage
react-rich-tree JS library on GitHub
react-rich-tree JS library on npm
Download react-rich-tree JS library
Keywords
ngangularng2angular2treetreeviewtree-viewangular2-treeangular-treeangular treeangular2 treeng2-treeng2treeng2 treengtree

React Rich Tree

We've built so many projects that required a tree component, and could never find a library that supported all features. And building your own tree component is not an easy task.

So, we decided to build one for React, with all the features you can think of:

  • Simple to use
  • Well Documented
  • Customizable & Extensible (override field names, custom templates, etc...)
  • Keyboard navigation
  • Async data
  • Drag & Drop
  • Select & Multiselect
  • Filtering
  • Virtual Scrolling
  • Save & restore tree state
  • Event callbacks
  • API for accessing & altering the tree state
  • Easily styled (comes with very minimal styling)

Getting started

npm i -S react-rich-tree

import { Tree } from 'react-rich-tree';

nodes = [{
  id: 1,
  name: 'root',
  children: [{
    id: 2,
    name: 'child'
  }, {
    id: 4,
    name: 'child2'
  }]
}, {
  id: 5,
  name: 'root2'
}];

options = {}

onEvent = (event) => console.log(event)

<Tree nodes={ nodes } options={ options } onEvent={ onEvent }/>

Full example

import { Tree, TreeNode, TreeModel, TREE_ACTIONS } from 'react-rich-tree';

nodes = [{
  id: 1,
  name: 'root',
  type: 'folder',
  children: [{
    id: 2,
    type: 'file',
    name: 'child'
  }, {
    id: 4,
    type: 'file',
    name: 'child2'
  }]
}, {
  id: 5,
  type: 'folder',
  name: 'root2',
  hasChildren: true // async
}];

options = {
  childrenField: 'children',
  displayField: 'name',
  idField: 'id',
  getChildren: (node: TreeNode) => http.get(`/children/${node.id}`), // async load children - to be used with `hasChildren` property on the node
  actionMapping: { // override key and mouse actions
    mouse: {
      click: TREE_ACTIONS.TOGGLE_SELECTED,
      dblClick: (tree: TreeModel, node: TreeNode, $event: any) => node.toggleExpanded(),
      contextMenu: null,
      expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,
      drop: TREE_ACTIONS.MOVE_NODE
    },
    keys: {
      [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
      [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
      [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
      [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
      [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,
      [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED
    }
  },
  allowDrag: (node: TreeNode) => node.isLeaf, // boolean or function. isLeaf is a function on TreeNode wrapper class
  allowDrop: (node: TreeNode) => node.data.type === 'folder', // data is the original data supplied by nodes
  levelPadding: 4, // to be used for whole row selection (instead of putting padding on children)
  nodeClass: (node: TreeNode) => node.type, // for styling
  useVirtualScroll: true,
  nodeHeight: 30,
  dropSlotHeight: 3,
  animateExpand: true,
  animateSpeed: 50,
  animateAcceleration: 1.1,
  scrollOnSelect: true,
  getNodeClone: (node: TreeNode) => ({ ...node.data, id: uuid.v4() }), // for dragging with ctrl pressed
  TreeNodeComponent: ({ node }) => <span>{ node.data.name } ({node.children.length})</span>
  TreeNodeWrapperComponent: MyCustomNodeWrapper, // a component class that extends NodeWrapper component (or replaces it)
  TreeNodeFullComponent: MyCustomFullNode, // a component class that extends Node component (or replaces it)
  LoadingComponent: ({ node }) => <img src="loading.gif"/>
}

<Tree
  nodes={ nodes }
  options={ options }
  onToggleExpanded={ onToggleExpanded }
  onActivate={ onActivate }
  onDeactivate={ onDeactivate }
  onFocus={ onFocus }
  onBlur={ onBlur }
  onInitialized={ onInitialized }
  onUpdateData={ onUpdateData }
  onMoveNode={ onMoveNode }
  onCopyNode={ onCopyNode }
  onEvent={ onEvent }
  onLoadNodeChildren={ onLoadNodeChildren }
  onChangeFilter={ onChangeFilter }
  onStateChange={ onStateChange }
/>

Storybook

coming soon

Docs

coming soon

What's next

We would always love to hear suggestions for features & improvements - just open an issue.

Some things on our mind down the road:

  • Context menu
  • Checkbox & master checkbox support
  • Add Demo & StoryBook
  • Add Tests

Contributing

Run once: npm run setup

Run after changing code: npm run build npm run start:example

Please check the issues / project before starting to work on a feature / bug to make sure it's not already in progress.