Installations

npm install @hefni101/react-nestable

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.13.0

NPM Version

8.19.3 Score

53.4

Supply Chain

92.6

Quality

74.2

Maintenance

50

Vulnerability

99.6

License

Pull Requests

Open

3

Total

51

Closed

40

Merged

8

Issues

Open

9

Total

65

Closed

56

Releases

Unable to fetch releases

Contributors

4

Unable to fetch Contributors

View All 4 Contributors

Languages

5

TypeScript

JavaScript

CSS

Stylus

HTML

TypeScript (85.1%)

JavaScript (6.49%)

CSS (4.5%)

Stylus (3.43%)

HTML (0.48%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

primetwig

Download Statistics

Total Downloads

7,509

Last Day

4

Last Week

10

Last Month

14

Last Year

2,616

GitHub Statistics

ISC License

217 Stars

13 Commits

97 Forks

6 Watchers

3 Branches

4 Contributors

Updated on Feb 16, 2025

Bundle Size

51.83 kB

Minified

15.11 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

2.0.1

Package Id

@hefni101/react-nestable@2.0.1

Unpacked Size

2.29 MB

Size

582.95 kB

File Count

37

NPM Version

8.19.3

Node Version

18.13.0

Published on

Apr 18, 2023

Total Downloads

Cumulative downloads

Total Downloads

7,509

Last Day

0%

4

Compared to previous day

Last Week

400%

10

Compared to previous week

Last Month

-56.3%

14

Compared to previous month

Last Year

-46.5%

2,616

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

6

classnames prop-types react react-addons-shallow-compare react-addons-update react-dom

Dev Dependencies

31

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
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	number	`30`	Amount of pixels which mouse should move horizontally before increasing/decreasing level (nesting) of current element.
maxDepth	number	`10`	Maximum available level of nesting.
collapsed	boolean	`false`	Are groups collapsed by default.
group	string or number	`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	node		If you pass it, it will get wrapped with drag handlers and you may use it in your render method.
idProp	string	`"id"`	Optional name of property for id.
childrenProp	string	`"children"`	Optional name of property for children.
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.
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.
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.
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.

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

Code-Review

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

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

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

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

@hefni101/react-nestable

Installations

Developer Guide

Yes

CommonJS

18.13.0

8.19.3

Score

Pull Requests

3

51

40

8

Issues

9

65

56

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

validate.email 🚀

Developer

primetwig

Download Statistics

GitHub Statistics

Bundle Size

51.83 kB

15.11 kB

Maintainers

Package Meta Information

Total Downloads

7,509

Daily Downloads

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