Skip to content
drag and drop, grid edition. built with react
Branch: master
Clone or download
Latest commit d34e6bc Jun 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook initial commit May 14, 2019
.vscode use children count instead of passing items through grid May 18, 2019
src allow additional props on GridItem Jun 6, 2019
stories remeasure on drag start to support dragging between dropzones that ar… May 21, 2019
.gitignore rename May 16, 2019
.npmignore initial commit May 14, 2019
Readme.md Update Readme.md Jun 7, 2019
babel.config.js initial commit May 14, 2019
demo.gif add demo image to readme May 18, 2019
dnd-preview.jpg add link to codesandbox May 16, 2019
jest.config.js initial commit May 14, 2019
package.json
rollup.config.js rename May 16, 2019
tsconfig.json initial commit May 14, 2019
yarn.lock use children count instead of passing items through grid May 18, 2019

Readme.md

A demo showing views being swiped left and right.

react-grid-dnd

npm package Follow on Twitter

Grid style drag and drop, built with React. See a live example on codesandbox. You can also see it in action here.

Features

  • Supports dragging between arbitrary number of lists.
  • Built with react-gesture-responder to enable better control over gesture delegation.
  • Disable drop targets or dragging altogether
  • Animated with react-spring

Install

Install react-grid-dnd and react-gesture-responder using yarn or npm.

yarn add react-grid-dnd react-gesture-responder

Usage

Because GridItem components are rendered with absolute positioning, you need to ensure that GridDropZone has a specified height or flex, like in the example below.

import {
  GridContextProvider,
  GridDropZone,
  GridItem,
  swap
} from "react-grid-dnd";

function Example() {
  const [items, setItems] = React.useState([]); // supply your own state

  // target id will only be set if dragging from one dropzone to another.
  function onChange(sourceId, sourceIndex, targetIndex, targetId) {
    const nextState = swap(items, sourceIndex, targetIndex);
    setItems(nextState);
  }

  return (
    <GridContextProvider onChange={onChange}>
      <GridDropZone
        id="items"
        boxesPerRow={4}
        rowHeight={100}
        style={{ height: "400px" }}
      >
        {items.map(item => (
          <GridItem key={item.id}>
            <div
              style={{
                width: "100%",
                height: "100%"
              }}
            >
              Render your item here
            </div>
          </GridItem>
        ))}
      </GridDropZone>
    </GridContextProvider>
  );
}

Dragging between lists

You can see this example in action on codesandbox.

import {
  GridContextProvider,
  GridDropZone,
  GridItem,
  swap,
  move
} from "react-grid-dnd";

function App() {
  const [items, setItems] = React.useState({
    left: [
      { id: 1, name: "ben" },
      { id: 2, name: "joe" },
      { id: 3, name: "jason" },
      { id: 4, name: "chris" },
      { id: 5, name: "heather" },
      { id: 6, name: "Richard" }
    ],
    right: [
      { id: 7, name: "george" },
      { id: 8, name: "rupert" },
      { id: 9, name: "alice" },
      { id: 10, name: "katherine" },
      { id: 11, name: "pam" },
      { id: 12, name: "katie" }
    ]
  });

  function onChange(sourceId, sourceIndex, targetIndex, targetId) {
    if (targetId) {
      const result = move(
        items[sourceId],
        items[targetId],
        sourceIndex,
        targetIndex
      );
      return setItems({
        ...items,
        [sourceId]: result[0],
        [targetId]: result[1]
      });
    }

    const result = swap(items[sourceId], sourceIndex, targetIndex);
    return setItems({
      ...items,
      [sourceId]: result
    });
  }

  return (
    <GridContextProvider onChange={onChange}>
      <div className="container">
        <GridDropZone
          className="dropzone left"
          id="left"
          boxesPerRow={4}
          rowHeight={70}
        >
          {items.left.map(item => (
            <GridItem key={item.name}>
              <div className="grid-item">
                <div className="grid-item-content">
                  {item.name[0].toUpperCase()}
                </div>
              </div>
            </GridItem>
          ))}
        </GridDropZone>
        <GridDropZone
          className="dropzone right"
          id="right"
          boxesPerRow={4}
          rowHeight={70}
        >
          {items.right.map(item => (
            <GridItem key={item.name}>
              <div className="grid-item">
                <div className="grid-item-content">
                  {item.name[0].toUpperCase()}
                </div>
              </div>
            </GridItem>
          ))}
        </GridDropZone>
      </div>
    </GridContextProvider>
  );
}
You can’t perform that action at this time.