react-virtual-drag-list

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 onTop = () => {
    // scrolled to the top of list
  }
  const onBottom = () => {
    // scrolled to the bottom of list
  }
  const onDrop = (params) => {
    // dnd complete
    setList(() => params.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> }
      v-top={ onTop }
      v-bottom={ onBottom }
      v-drop={ onDrop }
    >
      {
        (record, index, dataKey) => {
          return (
            <div>
              <span class=".handle">{ index }</span>
              { record.text }
            </div>
          )
        }
      }
    </VirtualList>
  )
}

Props

Callback

Emit	Type	Required?	Default	Description
v-top	Function		-	Scrolling to the top of the scroller
v-bottom	Function		-	Scrolling to the bottom of the scroller
v-drag	Function		-	Drag is started
v-drop	Function		-	Drag is complete
v-add	Function		-	Element is dropped into the list from another
v-remove	Function		-	Element is removed from the list into another

Common used

Prop	Type	Required?	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
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	Function/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
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
debounceTime	Number		0	debounce time on scroll
throttleTime	Number		0	debounce time on scroll
header	JSX.Element		-	Top of list
footer	JSX.Element		-	Bottom of list

Uncommonly used

Prop	Type	Required?	Default	Description
draggable	String		-	Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged
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
itemTag	String		div	Label type for list item element
itemStyle	Object		{}	List item element style
itemClass	String		''	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