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-virtual-drag-list

v2.7.1

Published

A virtual scrolling list component that can be sorted by dragging

Downloads

17,723

Readme

react-virtual-drag-list

npm npm Software License

A virtual scrolling list component that can be sorted by dragging

Live Demo

Simple Usage

npm i react-virtual-drag-list

Root component:

import VirtualList from 'react-virtual-drag-list';

function Virtual() {

  const [list, setList] = useState([{id: '1', text: 'a'}, {id: '2', text: 'b'}, ...]);

  const onDrop = (event) => {
    // dnd complete
    setList(() => event.list);
  }

  // use style and className as jsx used
  return (
    <VirtualList
      className="virtual-list"
      style={{ height: '500px' }}
      dataKey="id"
      dataSource={ list }
      handle=".handle"
      header={ <div className="loading">top loading...</div> }
      footer={ <div className="loading">bottom loading...</div> }
      onDrop={ onDrop }
    >
      {
        (record, index, dataKey) => {
          return (
            <div>
              <span class=".handle">{ index }</span>
              { record.text }
            </div>
          )
        }
      }
    </VirtualList>
  )
}

Props

Callback

| Emit | Type | Default | Description | | ---------- | ---------- | ----------- | --------------------------------------- | | onTop | Function | - | Scrolling to the top of the scroller | | onBottom | Function | - | Scrolling to the bottom of the scroller | | onDrag | Function | - | Drag is started | | onDrop | Function | - | Drag is complete |

Required props | Prop | Type | Default | Description | | ------------ | -------- | ----------- | --------------------------------------------------------------------- | | dataKey | String | - | The unique identifier of each piece of data, in the form of 'a.b.c' | | dataSource | Array | [] | The data that needs to be rendered |

Common used

| Prop | Type | Default | Description | | -------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | | header | JSX.Element | - | Top of list | | footer | JSX.Element | - | Bottom of list | | size | Number | - | Estimated height of each row. You can choose to pass it or not, it will be automatically calculated | | keeps | Number | 30 | The number of lines rendered by the virtual scroll | | handle | String | - | Drag handle selector within list items | | group | Object/String | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false } | | scroller | Document \| HTMLElement | - | Virtual list scrolling element | | direction | vertical \| horizontal | vertical | Scroll direction | | debounceTime | Number | 0 | debounce time on scroll | | throttleTime | Number | 0 | debounce time on scroll | | tableMode | Boolean | false | display with table and tbody |

Uncommonly used

| Prop | Type | Default | Description | | ------------------ | --------- | ------------------------- | --------------------------------------------------------------------------- | | draggable | String | '.virutal-dnd-list-item' | Specifies which items inside the element should be draggable | | sortable | Boolean | true | Whether the current list can be sorted by dragging | | lockAxis | x \| y | - | Axis on which dragging will be locked | | keepOffset | Boolean | false | When scrolling up to load data, keep the same offset as the previous scroll | | disabled | Boolean | false | Disables the sortable if set to true | | animation | Number | 150 | Drag-and-drop's animation delay | | autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container | | scrollThreshold | Number | 55 | Threshold to trigger autoscroll | | delay | Number | 0 | Time in milliseconds to define when the sorting should start | | delayOnTouchOnly | Boolean | false | Only delay on press if user is using touch | | fallbackOnBody | Boolean | false | Appends the ghost element into the document's body | | rootTag | String | div | Label type for root element | | wrapTag | String | div | Label type for list wrap element | | wrapStyle | Object | {} | List wrapper element style | | wrapClass | String | '' | List wrapper element class | | itemClass | String | 'virutal-dnd-list-item' | List item element class | | ghostStyle | Object | {} | The style of the mask element when dragging | | ghostClass | String | '' | The class of the mask element when dragging | | chosenClass | String | '' | The class of the selected element when dragging |

Methods

Use the methods exposed in the component by setting ref

...

const virtualRef = useRef();

const scrollToBottom = () => {
  virtualRef.current.scrollToBottom();
}

return (
  <button onClick={ scrollToBottom }></button>
  <virtualList
    ref={ virtualRef }
    ...
  >
    {
      (record) => <div>{ record.text }</div>
    }
  </virtualList>
)

| Prop | Description | | ------------------------ | ---------------------------------------------------------- | | getSize(key) | get the height of the specified item by key value | | getOffset() | get the current scroll top/left | | getClientSize() | Get wrapper element client viewport size (width or height) | | getScrollSize() | Get all scroll size (scrollHeight or scrollWidth) | | scrollToTop() | scroll to the top of the list | | scrollToBottom() | scroll to the bottom of the list | | scrollToKey(key) | scroll to the specified data-key | | scrollToIndex(index) | scroll to the specified index value | | scrollToOffset(offset) | scroll to the specified height |