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
• Touch support 📱 (desktop and mobile)
• Extra small
• Easy auto scrolling integration 🔥
• Add and remove items with no doubts
• Variable heights supported by design 🚀
• Custom preview component for draggable
• 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}
      preview={
        <Item id={item.id} color={item.color} listeners={listeners} isDragging={false} />
      }
    >
      <Item
        item={item}
        handler={(
          <div className="dnd-icon" {...listeners}>
            <img src={dndIc} alt="dnd" />
          </div>
        )}
      />
    </Draggable>
  );
};

API

useDraggableContext

• onDrop: Function - fires when the item drops in the desired place
• snapThreshold?: number - the threshold from which drop areas will be highlighted

Returns DraggableContextType - containing the dragging state

useDraggable

• context: DraggableContextType - containing the dragging state
• index: number - uses to identify the item

Returns { listeners: EventHandler[], isDragging: boolean }

Draggable

• context: DraggableContextType - containing the dragging state
• index: number - uses to identify the item
• listeners?: EventHandler[] - containing dragging event handlers and can be passed to your desired handler (one or more)
• dividerClassName?: string - Customize horizontal divider
• preview?: ReactNode - Shows the element when dragging