rn
5.0/51
react-nestable
npm i react-nestable
rn

react-nestable

Drag & drop hierarchical list made as a react component

by George Y.

2.0.0 (see all)License:ISCTypeScript:Built-In
npm i react-nestable
Readme

Table of Contents

Demo

Demo

Installation

npm install -save react-nestable

Usage

import Nestable from 'react-nestable';

// this usually goes once
// to the entry point of the whole app
// (e.g. src/index.js)
import 'react-nestable/dist/styles/index.css';

every item must have a unique id in order to distinguish elements

const items = [
  { id: 0, text: 'Andy' },
  {
    id: 1, text: 'Harry',
    children: [
      { id: 2, text: 'David' }
    ]
  },
  { id: 3, text: 'Lisa' }
];

const renderItem = ({ item }) => item.text;

const Example = () => (
  <Nestable
    items={items}
    renderItem={renderItem}
  />
)

Options

PropertyTypeDefaultDescription
classNamestringundefinedExtra class name which can be passed to a root element.
itemsarray[]Array of items. Every item must be of shape {id: @uniq}.
thresholdnumber30Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element.
maxDepthnumber10Maximum available level of nesting.
collapsedbooleanfalseAre groups collapsed by default.
groupstring or numberrandom stringDifferent group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances.
handlernodeIf you pass it, it will get wrapped with drag handlers and you may use it in your render method.
idPropstring"id"Optional name of property for id.
childrenPropstring"children"Optional name of property for children.
renderItemfunction({item}) => String(item)Function for rendering every item. Has a single parameter with keys: item - item from your array, index - number, index of the item, depth - number, depth of the item, collapseIcon - node, icon for items with children (allows you to collapse the group), handler - node, which you have passed via the same property, but wrapped with some additional events.
renderCollapseIconfunction() => <DefaultIcon />Function for rendering collapse icon. Has a single parameter with keys: isCollapsed - boolean, true if this group has children and is collapsed.
onChangefunction() => {}Callback which has a single parameter with keys: items - new array after position was changed, dragItem - item which has been moved, targetPath - array of numbers, those numbers are indices and they make path to a location, to where item has been moved.
confirmChangefunction() => trueCallback which has a single parameter with keys: dragItem - item which is being dragged, destinationParent - item where dragItem is about to land (or null if moving to root). Let function return false if this movement should not happen.

Public methods

MethodAcceptsDescription
collapsestring or array"NONE" - expand all groups; "ALL" - collapse all groups; [] - collapse all groups with ids from given array

Todo

  • add touch
  • cover with tests

PS: Please, make an issue or create a PR if you need any more functionality.

License

ISC