Skip to content

React DnD reimplementation of the excellent Nestable jQuery plugin

Notifications You must be signed in to change notification settings

deuex-solutions/react-dnd-nestable

 
 

Repository files navigation

React DnD Nestable

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.

Demos

What does it look like?

<Nestable
  items={ this.state.items }
  renderItem={ this.renderItem }
  onUpdate={ this.updateItems }
  maxDepth={ 3 }
/>

Props

items

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: [] }

renderItem

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.

childrenProperty

Optional. The property on each item which contains an array of children. Defaults to 'children'.

childrenStyle

Optional. Style object applied to nested <ol>s.

onUpdate

Optional. A function invoked with the new array of items whenever an item is dropped in a new location.

useDragHandle

Optional. Set to true to specify a drag handle. Otherwise, entire item is draggable. Defaults to false.

maxDepth

Optional. Maximum item depth. Defaults to Infinity.

threshold

Optional. Distance in pixels the cursor must move horizontally before item changes depth. Defaults to 30.

About

React DnD reimplementation of the excellent Nestable jQuery plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%