vingeraycn / ruuri Goto Github PK

View Code? Open in Web Editor NEW

27.0 1.0 4.0 527 KB

Any draggable layout supported based muuri for react. No depend on a specific version of react and muuri. It's free.

License: MIT License

JavaScript 7.91% TypeScript 92.09%

drag-and-drop grid muuri react muuri-react ruuri grids layout-engine sorting

ruuri's Introduction

Any draggable layout supported based muuri for react.

Thanks For Your Star ⭐️

Features

✅ 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.

Rencently News

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

Motivation

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.

Get Started

Add ruuri and muuri as dependencies.

yarn add ruuri muuri

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
    }}
  />
...

Additional

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',
    },
  })}
/>

Examples

ruuri v2 examples

Drag between diffrent containers with React 18

ruuri v1 examples

License

ruuri's People

Contributors

Stargazers

Watchers

Forkers

momoiicom romanstetsyk gogogi77 blaiseludvig

ruuri's Issues

Dynamically resize items

Is there any way to resize grid items dynamically like in this codesandbox that uses muuri-react

Here is a codesandbox with my attempt, but the items overlap on resize.

Any help would be appreciated, and thanks for creating this wrapper!

Grid works incorrectly without `<React.StrictMode>`

Version: ruuri v2.0.0
The grid works incorrectly in production or dev mode without <React.StrictMode>.
The following error is printed to the console.

Codesandbox to reproduce the issue. You can add/remove strict mode to see the error in the console.
Do you think there's a workaround for this?

Thank you for your hard work!

The element did not rerender

Hi @vingeraycn

I found another issue
When i update 'data' for DraggableGid component using hook
{ id: 'id-1', name: 'id1' }, { id: 'id-2', name: 'id2' } -> { id: 'id-2', name: 'id2' }, { id: 'id-1', name: 'id1' }

-> The element did not rerender

I expected the result after updating data like picture bellow

My code:

export 'useInsertionEffect' (imported as 'React') was not found in 'react'

Hi, I just installed the package using npm and got the following error straight away:

in ./node_modules/ruuri/dist/index.es.js 1394:25-52
export 'useInsertionEffect' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

I'm compiling with React 17.0.2. I found a similar issue here and it appears it might be linked to @emotion/react. I tried updating but didn't solve.

Compiling issues with React^17.0.2

Hey, look what I got in my project

(I have my package.json with dependencies as follows: "react": "^17.0.2" & "react-dom": "^17.0.2")

No animation when items are added/removed/showing/hiding

v.2.0.0-2

When items are added/removed/showing/hiding, they have no animation (fade-in / fade-out). Manipulating related properties like hiddenStyles, hideDuration doesn’t have an effect.

An example from muuri of how to add animation when adding items to the grid.

I can submit a merge request.

Screen.Recording.2023-06-28.at.8.12.55.PM.mov

Support "propsToData" property like muuri-react lib

Hi @vingeraycn!

First of all, thank you a lot for creating this amazing library.
I'm migrating from "muuri-react" to "ruuri" library but i'm facing a problem with propsToData property. In muuri-react library, i used it like in https://paol-imi.github.io/muuri-react/docs/api-reference/muuricomponent#propstodata

It seems this property is unsupported in "ruuri" library
It would be great if you support it in "ruuri" library or you can suggest any ways to handle it

Thanks, I look forward to your response!

Problem starting

Hello @vingeraycn,

Thanks for your work with this wrapper.

I was trying to get it to work but I see this issue: Uncaught TypeError: n is undefined.

This is the stack-trace:

Uncaught TypeError: n is undefined
    q index.es.js:56
    DraggableGrid index.es.js:1571
    Preact 98
    debounceRendering debounceRendering.js:13
    debounceRendering debounceRendering.js:11
    Preact 3
    React 2
    Preact 6
    reactRender app.js:49
    runRender app.js:242
    <anonymous> app.js:253
    setTimeout handler* app.js:252
    promise callback* app.js:197
    promise callback* app.js:74
    js commons.js:2334
    factory commons.js:6767
    __webpack_require__ commons.js:6101
    __webpack_exports__ commons.js:7470
    O commons.js:6150
    <anonymous> commons.js:7471

Looking at dist/index.es.js:56 I see this code: n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.

These are my version:

"muuri": "^0.9.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"ruuri": "^0.1.7",

And, this is how I create the component:

// ----------------------------------------------------------------------------
// -------------------------------------------------------------------- Imports
// ----------------------------------------------------------------------------
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Libraries
import React, { useRef } from 'react'
import classnames from 'classnames'
import map from 'lodash/map'

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Components
import DraggableGrid, { DraggableItem } from 'ruuri'

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Locals
import smallKey from '../../methods/small-key'

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Abstractions
// const { Fragment } = React

// ----------------------------------------------------------------------------
// ------------------------------------------------------------------ Component
// ----------------------------------------------------------------------------
/** Grid */
const Grid = ({
  nodes,
  Renderer = (node) => <h2>Need to define a renderer for {node.title}</h2>,
  className,
  itemClassName,
}) => (
  <DraggableGrid
    containerClass={classnames('grid muuri-grid ext-image-fix', className)}
    itemClass={classnames('grid-item muuri-grid-item', itemClassName)}
    dragEnabled={false}
    dragSort={false}
  >
    {map(nodes, (node) => (
      <DraggableItem>
        <Renderer node={node} />
      </DraggableItem>
    ))}
  </DraggableGrid>
)

// ----------------------------------------------------------------------------
// -------------------------------------------------------------------- Exports
// ----------------------------------------------------------------------------
export default Grid

Could you please comment?

Thanks!

The value of dragEnabled property can't update using hook

First of all, thank you a lot for creating this amazing library

My code:

import DraggableGrid, { DraggableGridHandle } from 'ruuri';
import './App.css';
import { useRef, useState } from 'react';

function App() {
const ref = useRef<DraggableGridHandle | null>(null)
const [data, ] = useState([
{
id: 'id-1'
},
{
id: 'id-2'
}
])
const [isDragEnabled, setIsDragEnabled] = useState(false);

return (
<>
<DraggableGrid
data={data}
renderItem={(itemData: any) => (

{itemData.id}

)}
dragEnabled={isDragEnabled}
dragSort={true}
getItemProps={(itemData: any) => ({
style: {
background: 'red',
},
})}
layout={
{
fillGaps: true
}
}
ref={ref}
/>
<button onClick={() => { setIsDragEnabled(true)}}>Edit
</>
);
}

export default App;

My expection, when i click "Edit" button to set the value of dragEnabled property to "true" but it was not as expected

Problem with percentage width on grid items

Hi @vingeraycn!

First of all, thank you for creating this amazing library. I really wanted to use Muuri in one of my React projects, and it wouldn't have been possible without the help of your library.

The problem I am facing is that I want to set a percentage width on my grid items to create a 3 column layout. If I set a percentage width on the renderItem, it behaves unexpectedly and breaks my layout.
I figured out that if I set the percentage width on the .ruuri-draggable-item elements, it works perfectly.
The issue seems to be that you're supposed to define the dimensions of your items on the item's container element, instead of the content element.

This is how it's done in the official example in the Muuri docs. The width: 100px is set on the .item, and the .item-content only has width: 100% on it.

I made a codeSandbox where I reproduced this bug.
Notice how the first grid's items have their width set to 33%, and the second grid's items don't have their width set at all.

I would be interested in making a PR myself, but I'm not sure about what approach to take. The solution I came up with is exposing the .ruuri-draggable-item element in the API, but there could be a different, more elegant approach.

Thanks, your help is greatly appreciated!