Simple SortableList component (TypeScript)

[remitoffoli]

Hi there,

Today, I stumbled upon react-sortable-hoc and played with it until I noticed it wasn't maintained anymore in favor of dnd-kit. I then struggled a lot with the complexity of dnd-kit, which I guess is missing plug-and-play components for general use cases. I found the examples, but they're so complexly built, that I couldn't copy/paste anything from it.

So I decided to create my own simple SortableList (like the ones in Notion):

And wrap it with a generic and easy-to-use component (also getting around the requirement or an id property on your items):

<SortableList
  items={items}
  getItemId={(item) => item.uid}
  renderItem={({ item, isActive, isDragged, ref, props, handleProps }) => {
    let className = "MyListItem";
    if (isActive) className += " isActive";
    if (isDragged) className += " isDragged";
    return <>
      <li ref={ref} key={item.uid} className={className} {...props}>
        <span className="handle" {...handleProps} /> {item.name}
      </li>
    </>
  }}
  onSort={(oldIndex, newIndex) => {
    setItems(/* apply sort to state */);
  }}
/>

You can check the TypeScript code here: https://codesandbox.io/s/angry-hamilton-qixv4m?file=/src/App.tsx:973-1823

I hope this helps.

And thanks @clauderic for all the effort building this lib. It's complex for basic use cases, but it looks powerful. 😊🙌