react-beautiful-dnd-grid

Installation

npm i @vitorfreitas/react-beautiful-dnd-grid --save-dev
                          OR
yarn add @vitorfreitas/react-beautiful-dnd-grid --dev

Demo

https://stackblitz.com/edit/react-beautiful-dnd-grid-demo

Usage

import React, { useState } from "react";
import { DragDropContainer } from "@constantindjm/react-beautiful-dnd-grid";

const noop = function() {};

const items = [{ id: "0" }, { id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];

const DraggableItem = props => <div>id: {props.item.id}</div>;

const Component = () => {
  const [disableDrag, setDisableDrag] = useState(false);

  return (
    <DragDropContainer
      items={items}
      direction="horizontal"
      maxItems={3}
      render={item => <DraggableItem item={item} />}
      onDragEnd={noop}
      gap={10}
      isDragDisabled={disableDrag}
      containerStyles={{ minWidth: 300 }}
      itemStyles={{ background: 'red' }}
    />
  );
};