antd-nestable
TypeScript icon, indicating that this package has built-in type declarations

1.0.17 • Public • Published

antd-nestable

Drag & drop hierarchical list made as a react component for Ant Design

npm codebeat badge npm npm bundle size GitHub

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.

Package Sidebar

Install

npm i antd-nestable

Weekly Downloads

1

Version

1.0.17

License

MIT

Unpacked Size

13.3 kB

Total Files

8

Last publish

Collaborators

  • tkvern