npmpackage.info

Gathering detailed insights and metrics for react-nestable

Other packages similar to react-nestable

@hefni101/react-nestable

2.0.1

Drag & drop hierarchical list made as a react component

react-nestable-ext

2.0.2

Drag & drop hierarchical list made as a react component

react-nestable-fork

1.3.0

Drag & drop hierarchical list made as a react component

react-nestable-boost

2.0.1

Drag & drop hierarchical list made as a react component

Gathering detailed insights and metrics for react-nestable

react-nestable - 3.0.2 | npmpackage.info

react-nestable

Drag & drop hierarchical list made as a react component

3.0.2

217

ISC

TypeScript

8.49 kB

2,491,908 1.7

Installations

npm install react-nestable

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.20.0

NPM Version

8.19.4 Score

89.6

Supply Chain

93.1

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

51

Closed

40

Merged

8

Issues

Open

9

Total

65

Closed

56

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

CSS

Stylus

HTML

TypeScript (85.1%)

JavaScript (6.49%)

CSS (4.5%)

Stylus (3.43%)

HTML (0.48%)

Developer

primetwig

Download Statistics

Total Downloads

2,491,908

Last Day

2,060

Last Week

13,178

Last Month

53,685

Last Year

888,661

GitHub Statistics

ISC License

217 Stars

13 Commits

99 Forks

6 Watchers

3 Branches

4 Contributors

Updated on Feb 16, 2025

Bundle Size

29.39 kB

Minified

8.49 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 4 Contributors

Package Meta Information

Latest Version

3.0.2

Package Id

react-nestable@3.0.2

Unpacked Size

3.21 MB

Size

752.74 kB

File Count

NPM Version

8.19.4

Node Version

16.20.0

Published on

Dec 11, 2023

Total Downloads

Cumulative downloads

Total Downloads

2,491,908

Last Day

32.5%

2,060

Compared to previous day

Last Week

13.2%

13,178

Compared to previous week

Last Month

-2.8%

53,685

Compared to previous month

Last Year

19.9%

888,661

Compared to previous year

Weekly Downloads

Monthly Downloads

Demo

Installation

npm install -save react-nestable

Usage

import Nestable from 'react-nestable';

// this usually goes once
// to the entry point of the whole app
// (e.g. src/index.js)
import 'react-nestable/dist/styles/index.css';

// every item must have a 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 }) => item.text;

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

Options

Property	Type	Default	Description
childrenProp	string	`"children"`	Name of a property for children.
className	string	`undefined`	Extra class name which can be passed to a root element.
collapsed	boolean	`false`	Makes groups collapsed by default.
confirmChange	function	`() => true`	Callback which has a single parameter with keys: `dragItem` - item which is being dragged, `destinationParent` - item where dragItem is about to land (or `null` if moving to root). Let function return `false` if this movement should not happen.
disableCollapse	boolean	`false`	Disable toggling a collapsed state of items with children. If you need to set a specific initial state, then it is still possible to do so with the public method `collapse`.
disableDrag	boolean or function	`false`	Disable dragging. Pass boolean to apply to all items. Pass a callback to target individual items. It has a single parameter with keys: `item` - item from your array, `index` - number, index of the item, `depth` - number, depth of the item.
group	string or number	`random string`	Different group names may be passed if you have more than one nestable component on a page and want some extra styles for portal instances.
handler	node	`undefined`	If you pass it, it will get wrapped with drag handlers and you may use it in your render method.
idProp	string	`"id"`	Name of a property for id.
items	array	`[]`	Array of items. Every item must be of shape `{id: @uniq}` to distinguish elements.
maxDepth	number	`10`	Maximum available level of nesting.
onChange	function	`() => {}`	Callback which has a single parameter with keys: `items` - new array after position was changed, `dragItem` - item which has been moved, `targetPath` - array of numbers, those numbers are indices and they make path to a location, to where item has been moved.
onCollapseChange	function	`() => {}`	Callback which has a single parameter with one of two possible keys: `openIds` - array of ids which are open if `collapsed` is set to `ture`, or `closedIds` - array of ids which are closed if `collapsed` is set to `false`. Note: this callback is triggered not only when user explicitly opens or closes an item, but when implicit events happen as well, like when the only child of open item is moved out.
onDragEnd	function	`() => {}`	Callback which has no parameters. It is invoked when dragging ends via drop or cancel.
onDragStart	function	`() => {}`	Callback which has a single parameter with keys: `dragItem` - item which has been moved.
renderCollapseIcon	function	`() => <DefaultIcon />`	Function for rendering collapse icon. Has a single parameter with keys: `isCollapsed` - boolean, `true` if this group has children and is collapsed, `item` - item from your array.
renderItem	function	`({item}) => String(item)`	Function for rendering every item. Has a single parameter with keys: `item` - item from your array, `index` - number, index of the item, `depth` - number, depth of the item, `collapseIcon` - node, icon for items with children (allows you to collapse the group), `handler` - node, which you have passed via the same property, but wrapped with some additional events, `isDraggable` - boolean, tells if dragging is allowed for this item (see `disableDrag` prop for details).
threshold	number	`30`	Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element.

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 create a PR if you need any more functionality.

License

ISC

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-05-19

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-nestable

Other packages similar to react-nestable

react-nestable

Installations

Developer Guide

Yes

CommonJS

16.20.0

8.19.4

Score

Pull Requests

3

51

40

8

Issues

9

65

56

Releases

Unable to fetch releases

Languages

Developer

primetwig

Download Statistics

GitHub Statistics

Bundle Size

29.39 kB

8.49 kB

Maintainers

Package Meta Information

Total Downloads

2,491,908

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Table of Contents

Demo

Installation

Usage

Options

Public methods

Todo

License

10

10

0

0

0

0

0

0

0

0

1.7

/10