https://github.com/vingeraycn/ruuri
Any draggable layout supported based muuri for react. No depend on a specific version of react and muuri. It's free.
https://github.com/vingeraycn/ruuri
drag-and-drop grid grids layout-engine muuri muuri-react react ruuri sorting
Last synced: about 1 year ago
JSON representation
Any draggable layout supported based muuri for react. No depend on a specific version of react and muuri. It's free.
- Host: GitHub
- URL: https://github.com/vingeraycn/ruuri
- Owner: vingeraycn
- License: mit
- Created: 2022-04-25T03:30:11.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-30T17:24:41.000Z (about 1 year ago)
- Last Synced: 2025-04-09T20:14:01.687Z (about 1 year ago)
- Topics: drag-and-drop, grid, grids, layout-engine, muuri, muuri-react, react, ruuri, sorting
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 31
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
Any draggable layout supported based muuri for react.
Thanks For Your Star ⭐️
## Features
- ✅ [All features](https://github.com/haltu/muuri#:~:text=on%20the%20website.-,Features,-Fully%20customizable%20layout) of [`muuri`](https://github.com/haltu/muuri) are supported.
- ✅ Drag between different containers.(see [Example](#examples))
- ✅ 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.
## Rencently News
ruuri v2 will be released soon, migration from v1 checkout [here](./CHANGELOG.md)
## Table of Content
- [Motivation](#motivation)
- [Get Started](#get-started)
- [Additional](#additional)
- [Examples](#examples)
- [License](#license)
## Motivation
To be honest, there was already a library called [muuri-react](https://github.com/paol-imi/muuri-react) that did a React adaptation for [muuri](https://github.com/haltu/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.
## Get Started
1. Add `ruuri` and `muuri` as dependencies.
```bash
yarn add ruuri muuri
```
2. Import `ruuri` Component.
```jsx
import DraggableGrid from 'ruuri';
...
(
{ // your custom content here })}
// 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
}}
/>
...
```
## Additional
- Use handler
> Get current muuri grid instance or container dom element by `ref`.
```tsx
import DraggableGrid, { DraggableGridHandle } from 'ruuri';
import { useRef } from 'react';
...
const ref = useRef(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
...
```
- Use `getItemProps` and `getItemContentProps` to set container properties if you need it.
```tsx
...
const data: T[] = []
({
style: {
background: 'black',
},
})}
getItemContentProps={(itemData: T) => ({
style: {
backgroundColor: 'pink',
},
})}
/>
```
## Examples
### ruuri v2 examples
- [Drag between diffrent containers with React 18](https://codesandbox.io/s/drag-between-grids-v2-3jvvnr?file=/src/App.js)
### ruuri v1 examples
- [With React 16.8](https://codesandbox.io/s/react-16-8-sxds98)
- [With React 17](https://codesandbox.io/s/ruuri-on-react17-pf1px5)
- [Drag between different containers](https://codesandbox.io/s/drag-between-grids-vxmu62)
## License
Copyright © 2022-2023 [vingeray](https://github.com/vingeraycn) Licensed under the [MIT license](https://github.com/vingeraycn/ruuri/blob/main/LICENSE).