Note: this project is unmaintained.
This was an attempt at a React DnD reimplementation of the excellent but dated Nestable jQuery plugin. Basic functionality should work, though feature parity with Nestable was never quite reached.
<Nestable
items={ this.state.items }
renderItem={ this.renderItem }
onUpdate={ this.updateItems }
maxDepth={ 3 }
/>Required. Each item in the array must have a unique id property. This is used to keep track of which item is which.
Example: { id: '1', text: 'Item #1', children: [] }
Required. A function which returns a React component. Invoked with an object containing the following properties:
| Property | Description |
|---|---|
item |
The item to render. |
isDragging |
Whether the item is currently being dragged. |
isPreview |
Whether the item is the preview drag layer. |
depth |
The current depth level. |
connectDragSource |
Only available if props.useDragHandle is set to true. Use as specified in the React DnD docs. |
Optional. The property on each item which contains an array of children. Defaults to 'children'.
Optional. Style object applied to nested <ol>s.
Optional. A function invoked with the new array of items whenever an item is dropped in a new location.
Optional. Set to true to specify a drag handle. Otherwise, entire item is draggable. Defaults to false.
Optional. Maximum item depth. Defaults to Infinity.
Optional. Distance in pixels the cursor must move horizontally before item changes depth. Defaults to 30.