React Sortable HOC

The example below integrates the library with React Sortable HOC. Drag any of the items around - dropping it outputs the information in the console.

The example is contributed by mitchellwarr.

Live Editor

const ItemContainerSortable = ReactSortableHOC.sortableElement((props) => <div {...props} />)
const ListContainerSortable = ReactSortableHOC.sortableContainer(({ listRef, ...props }) => <div ref={listRef} {...props} />)

const components = {
  List: React.forwardRef((props, ref) => {
    return <ListContainerSortable {...props} listRef={ref} onSortEnd={(...args) => console.log(args)} />
  }),
  Item: (props) => {
    const { ['data-index']: index } = props
    return <ItemContainerSortable index={index} {...props} />
  },
}

function App() {
  return (
    <Virtuoso
      style={{ height: 400 }}
      totalCount={100}
      components={components}
      itemContent={(index) => (<div style={{ padding: '1rem 0.5rem' }}>Item {index}</div>)} 
    />)
}
render(<App />)

Result