Installations
npm install @hefni101/react-nestable
Developer Guide
Typescript
Yes
Module System
CommonJS
Node Version
18.13.0
NPM Version
8.19.3
Score
50.9
Supply Chain
92.6
Quality
74.2
Maintenance
50
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (85.1%)
JavaScript (6.49%)
CSS (4.5%)
Stylus (3.43%)
HTML (0.48%)
Developer
primetwig
Download Statistics
Total Downloads
7,324
Last Day
6
Last Week
28
Last Month
102
Last Year
3,642
GitHub Statistics
215 Stars
13 Commits
97 Forks
6 Watching
3 Branches
4 Contributors
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
Publised On
18 Apr 2023
Total Downloads
Cumulative downloads
Total Downloads
7,324
Last day
0%
6
Compared to previous day
Last week
833.3%
28
Compared to previous week
Last month
-34.2%
102
Compared to previous month
Last year
-1.1%
3,642
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
31
Table of Contents
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.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: ISC License: LICENSE.md:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/13 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
20 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
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