Gathering detailed insights and metrics for react-nestable
Gathering detailed insights and metrics for react-nestable
Gathering detailed insights and metrics for react-nestable
Gathering detailed insights and metrics for react-nestable
npm install react-nestable
Typescript
Module System
Node Version
NPM Version
87
Supply Chain
93.1
Quality
75.7
Maintenance
100
Vulnerability
100
License
TypeScript (85.1%)
JavaScript (6.49%)
CSS (4.5%)
Stylus (3.43%)
HTML (0.48%)
Total Downloads
2,210,338
Last Day
2,409
Last Week
16,149
Last Month
70,908
Last Year
993,944
215 Stars
13 Commits
97 Forks
6 Watching
3 Branches
4 Contributors
Minified
Minified + Gzipped
Latest Version
3.0.2
Package Id
react-nestable@3.0.2
Unpacked Size
3.21 MB
Size
752.74 kB
File Count
56
NPM Version
8.19.4
Node Version
16.20.0
Publised On
11 Dec 2023
Cumulative downloads
Total Downloads
Last day
-11.1%
2,409
Compared to previous day
Last week
0.4%
16,149
Compared to previous week
Last month
-11.4%
70,908
Compared to previous month
Last year
101.9%
993,944
Compared to previous year
33
npm install -save react-nestable
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}
/>
);
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. |
Method | Accepts | Description |
---|---|---|
collapse | string or array | "NONE" - expand all groups; "ALL" - collapse all groups; [] - collapse all groups with ids from given array. |
PS: Please, make an issue or create a PR if you need any more functionality.
ISC
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/13 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
project is not fuzzed
Details
Reason
19 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
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