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 }) => item.text;

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

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<{ collapse: (type: string | number[]) => void }>();
const collapse = (collapseCase: number) => {
  if (nestableRef.current) {
    switch (collapseCase) {
      case 0:
        nestableRef.current?.collapse('NONE');
        break;
      case 1:
        nestableRef.current?.collapse('ALL');
        break;
      case 2:
        nestableRef.current?.collapse([1]);
        break;
      default:
    }
  }
};
// Other Code
return (
  <Nestable
    ref={nestableRef}
    items={items}
    renderItem={renderItem}
    onChange={(value: []) => {
      console.log(value);
    }}
  />
)

Styles

To prevent overwriting the custom styles to antd, antd-nestable does not import the style files of components.