1.0.31 • Published 4 years ago

@constantindjm/react-beautiful-dnd-grid v1.0.31

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

react-beautiful-dnd-grid

Installation

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

Demo

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

Demo gif

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 }}
    />
  );
};
1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago