Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@hefni101/react-nestable
Advanced tools
Readme
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 |
---|---|---|---|
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. |
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
FAQs
Drag & drop hierarchical list made as a react component
The npm package @hefni101/react-nestable receives a total of 21 weekly downloads. As such, @hefni101/react-nestable popularity was classified as not popular.
We found that @hefni101/react-nestable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.