antd-nestable
Drag & drop hierarchical list made as a react component for Ant Design
Project resource
https://github.com/primetwig/react-nestable
Install
yarn add antd-nestable
Usage
import Nestable from 'antd-nestable'; const items = id: 0 text: 'Andy' id: 1 text: 'Harry' children: id: 2 text: 'David' id: 3 text: 'Lisa' ; const renderItem = item itemtext; const Demo = <Nestable = = />;
Props
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 } . |
threshold | int | 30 |
Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element. |
maxDepth | int | 10 |
Maximum available level of nesting. |
collapsed | boolean | false |
Are groups collapsed by default. |
group | string or int | random string |
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. |
handler | component | If you pass react component here, you may use it in your render method. | |
childrenProp | string | "children" |
Optional name of property with children. |
renderItem | function | ({ item, index }) => item.toString() |
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. |
renderCollapseIcon | function | ({ isCollapsed }) => <DefaultIcon /> |
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. |
confirmChange | function | () => true |
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 |
useRef
You can use ref control the component.
Example:
const nestableRef = useRef< void >;const collapse = { if nestableRefcurrent };// Other Codereturn <Nestable ref=nestableRef items=items renderItem=renderItem onChange= { console; } />
Styles
To prevent overwriting the custom styles to antd
, antd-nestable
does not import the style files of components.