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

Drag & drop hierarchical list made as a react component

3.0.2

215

ISC

TypeScript

8.49 kB

2,225,026 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

86.2

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

Contributors

Unable to fetch Contributors

View all 4 contributors

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,225,026

Last Day

570

Last Week

13,349

Last Month

62,493

Last Year

991,662

GitHub Statistics

215 Stars

13 Commits

97 Forks

6 Watching

3 Branches

4 Contributors

Bundle Size

29.39 kB

Minified

8.49 kB

Minified + Gzipped

Bundlephobia

Maintainers

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

Publised On

11 Dec 2023

Total Downloads

Cumulative downloads

Total Downloads

2,225,026

Last day

-12.4%

570

Compared to previous day

Last week

-16.9%

13,349

Compared to previous week

Last month

-16.4%

62,493

Compared to previous month

Last year

97.6%

991,662

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Demo
Installation
Usage
Options
Todo
License

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 2024-12-16

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

Contributors

Unable to fetch Contributors

Languages

Developer

primetwig

Download Statistics

GitHub Statistics

Bundle Size

29.39 kB

8.49 kB

Maintainers

Package Meta Information

Total Downloads

2,225,026

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