1.0.31 • Published 3 years ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
3 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

3 years ago

1.0.30

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago