react-tiny-dnd

Drag and Drop library for React.

Demo

Install via npm

npm install react-tiny-dnd

or

yarn add react-tiny-dnd

Features

• Vertical lists
• Easy auto scrolling integration 🔥
• Add and remove items with no doubts
• Variable heights supported by design 🚀
• Custom drag handles
• Multiple drag handlers

Usage

App.js

const [items, setItems] = useState(defaultItems);

const onDrop = (dragIndex: number, overIndex: number) => {
  const nextItems = moveItems(items, dragIndex, overIndex);
  setItems(nextItems);
};

const context = useDraggableContext({
  onDrop,
});

return (
  <>
    {items.map((item, i) => {
      return (
        <DraggableItem context={context} key={item.id} index={i} item={item} />
      );
    })}
  </>
);

DraggableItem.js

const DraggableItem = ({
  index,
  context,
  item,
}) => {
  const {
    listeners, // Handler listeners can be passed to Draggable component as well
    isDragging,
  } = useDraggable(context, index);
  
  return (
    <Draggable context={context} key={item.id} index={index}>
      <Item
        item={item}
        handler={(
          <div className="dnd-icon" {...listeners}>
            <img src={dndIc} alt="dnd" />
          </div>
        )}
      />
    </Draggable>
  );
};