npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-nav-tree-dnd

v2.0.5

Published

Drag & drop hierarchical list made as a react component

Downloads

5

Readme

Table of Contents

Installation

npm install -save react-nav-tree-dnd

Usage

import Nestable from 'react-nav-tree-dnd';

// this usually goes once
// to the entry point of the whole app
// (e.g. src/index.js)
import 'react-nav-tree-dnd/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