Drag & drop hierarchical list made as a react component
npm install react-nestable-2- Demo
- Installation
- Usage
- Options
- Todo
- License
```
npm install -save react-nestable
``
import Nestable from 'react-nestable';id
every item must have a unique 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 = () => (
renderItem={renderItem}
/>
)
`
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| className | string | undefined | Extra class name which can be passed to a root element. |[]
| items | array | | Array of items. Every item must be of shape { id: @uniq }. |30
| threshold | int | | Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element. |10
| maxDepth | int | | Maximum available level of nesting. |false
| collapsed | boolean | | Are groups collapsed by default. |random string
| group | string or int | | Different group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances. |"children"
| handler | component | | If you pass react component here, you may use it in your render method. |
| childrenProp | string | | Optional name of property with children. |({ item, index }) => item.toString()
| renderItem | function | | Function for rendering every item. Has a single parameter with keys: item - item from your array, index - index of the item, collapseIcon - icon for items with children (allows you to collapse group), handler - component which you have passed via the same property, but covered with some additional events. |({ isCollapsed }) =>
| renderCollapseIcon | function | | Function for rendering collapse icon. Has a single parameter with keys: isCollapsed - boolean, true if this group has children and collapsed. |() => {}
| onChange | function | | Callback which has two parameters: items - new array after position was changed, item - item which has been moved. |() => true
| confirmChange | function | | Callback which has two parameters: dragItem - item which is being dragged, destinationParent - item where dragItem is about to land. Let function return false if this movement should not happen. |
#### Public methods
| Method | Accepts | Description |
|--------|---------|-------------|
| collapse | string or array | "NONE" - expand all groups; "ALL" - collapse all groups; []` - collapse all groups with ids from given array |
- add touch
- cover with tests
PS: Please, make an issue or create a PR if you need any more functionality.
ISC