# react-nestable

**Repository Path**: mirrors_dafrok/react-nestable

## Basic Information

- **Project Name**: react-nestable
- **Description**: Drag & drop hierarchical list made as a react component
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Table of Contents

- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [Todo](#todo)
- [License](#license)

## Demo

[Demo](https://primetwig.github.io/react-nestable/dist/example/)


## Installation

```
npm install -save react-nestable
```

## Usage

```
import Nestable from 'react-nestable';
```
every item must have unique `id` 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 }) => {
    return item.text;
};
```
```
<Nestable
    items={items}
    renderItem={renderItem}
/>
```

## Options

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| 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 | `0` | Different group numbers are required if you have more than one nestable component on a page. |
| 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. |
| onChange | function | `() => {}` | Callback which has two parameters: `items` - new array after position was changed, `item` - item which has been moved. |

#### 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 |

## Todo

- add touch
- cover with tests

PS: Please, make an issue or drop me a letter if you need any more functionality.

## License

ISC