Thanks For Your Star ⭐️

• ✅ All features of muuri are supported.
• ✅ Drag between different containers.(see Example)
• ✅ Flexible API, easy to understand, It's React style.
• ✅ TypeScript support.
• ✅ ESM, CommonJS support.
• ✅ Almost all React versions are supported, such as React 16.8, React 17, React 18 or newer.
• ✅ New technology enthusiasts, we will keep it updated if needed.

ruuri v2 will be released soon, migration from v1 checkout here

• Motivation
• Get Started
• Additional
• Examples
• License

To be honest, there was already a library called muuri-react that did a React adaptation for muuri before this library came out, but it hadn't been updated for years and his examples and code didn't work with the latest React versions, and there were users in the community asking for help every year.

In fact we wanted to handle drag and drop only and not rely on a specific muuri or React version, so our product will not contain muuri or React code, the library will rely on the React and muuri versions referenced by the applicable project.

We hope that this library will turn the muuri API into something like React, a simple idea, implemented in a simple way, resulting in very low maintenance. If there are any subsequent breaking updates to muuri or the React features used, feel free to raise an issue or open a pull request.

1. Add ruuri and muuri as dependencies.

yarn add ruuri muuri

2. Import ruuri Component.

import DraggableGrid from 'ruuri';

...
  <DraggableGrid
    // Put your data here
    // Every data item must have a STRING type unique key, such as the id field in data below.
    data={[
      {
        id: 'id-1',
        ...
      },
      {
        id: 'id-2',
        ...
      }
    ]}
    renderItem={itemData => (<div>{ // your custom content here }</div>)}
    // pass grid options
    // see more options docs at https://github.com/haltu/muuri#-grid-options
    dragEnabled
    dragSort
    layout={
      {
        fillGaps: true
      }
    }

    // pass event handlers
    // see more event docs at https://github.com/haltu/muuri#-grid-events
    onSend={data => {
      // write your code here
    }}
    onDragStart={(data, event) => {
      // write your code here
    }}
  />
...

• Use handler

  Get current muuri grid instance or container dom element by ref.

import DraggableGrid, { DraggableGridHandle } from 'ruuri';
import { useRef } from 'react';

...
  const ref = useRef<DraggableGridHandle | null>(null)

  // get muuri grid instance
  // @see https://github.com/haltu/muuri#grid-methods
  // ref.current?.grid?.getElement()

  // get muuri container dom element
  // ref.current?.container

...
  <DraggableGrid ref={ref} data={[]} />

• Use getItemProps and getItemContentProps to set container properties if you need it.

...

const data: T[] = []

<DraggableGrid
 ...
 data={data}
 getItemProps={(itemData: T) => ({
   style: {
     background: 'black',
   },
  })}
  getItemContentProps={(itemData: T) => ({
    style: {
      backgroundColor: 'pink',
    },
  })}
/>

• Drag between diffrent containers with React 18

• With React 16.8
• With React 17
• Drag between different containers

Copyright © 2022-2023 vingeray Licensed under the MIT license.