[Suggestion] React.js version?

[NotAmaan]

Hi,

This is an awesome library. If there was a react.js version for this, I'm sure there'd be alot of users. There are existing libraries I've tried and the one of them is react-dnd which is what I use. Its setup is not straightforward but it is super flexible, it doesn't offer any transitions out of the box though. There's another called react-sortable-hoc which is easy to setup but does not support multiple lists/containers.

[niklasramo]

Hi!

Thanks for the feedback, glad you like it! React and Vue versions have been on my mind for a while now, but I want to first get this vanilla version to 1.0.0 status. So yep, React version is on it's way, but it might take a while.

[toxsick]

Hi,

I would also love to use this with react, but I failed to get it working with my webpack setup. Just to let u know other people are interested in this too :) Keep up the good work!

regards Hannes

[niklasramo]

@toxsick I actually haven't had the chance to try out Muuri with React yet, but that's pretty high on my todo-list. I'd be interested to hear about the problems you had. And yep, will keep up the good work ;)

[realsoelynn]

I have tried it with react and it works :)

Put the Muuri initialization code in the top most component of componentDidMount and then called murri layout function on componentDidUpdate

I noticed that require('muuri') is not initialising properly and i need to make changes like Replace global with window and also i hardcoded to be able to initialise react way. (Yes, there's a bug for initializating react way.)

[niklasramo]

@soelynn Awesome! I gotta test it myself and get require('muuri') working properly. Muuri uses UMD pattern and should at least theoretically work as CommonJS and AMD module as well as in the browser binding itself to the window. However, since Muuri requires access to document.body on initialization I suspect that might cause some issues.

[niklasramo]

Just tested muuri in a Create React App project (which uses webpack) and indeed there's an issue with importing muuri. I think I got it fixed now though and will add the fix to the next release (v0.4.0).

[toxsick]

@niklasramo is there an eta for v0.4.0?

[niklasramo]

https://github.com/haltu/muuri/milestone/4

Should be ready by the end of the month, just testing and reviewing currently.

[niklasramo]

@toxsick @realsoelynn and anyone else interested, v0.4.0 is now released :champagne:

[awreccan]

Muuri is awesome! My team is using it in a high-traffic React app and we'd like to migrate to a React version of Muuri sooner than later because the different paradigms both follow don't jive very well. Nov/Dec is probably the best time for us to do this from a time availability perspective. @niklasramo, I wonder, if my team starts on a react-muuri prototype before vanilla muuri reaches v1, could we find a way to collaborate on react-muuri in the future? Do you have any ideas that you'd like to see in a react-muuri?

[niklasramo]

@awreccan super awesome to hear Muuri is working for you 🙂 I've been planning to start on working on the React version way too long, and maybe time is now ripe for it. Muuri is in pretty solid state and could easily be upgraded to v1.0.0 status in it's current condition. The only reason I haven't done so yet is because it's missing a couple of features which I would really like to get done before the big version bump.

Some kind of collaboration would be definitely the smart move here. I haven't given much thought to the actual implementation details yet, but I do know some of the pain points which will be troublesome with the React version, but that's a discussion for another time. Ideally I'd like to just create a React wrapper around Muuri, but that's probably not gonna work nicely at all. The React version needs to be built from the ground up. Sure, we can copy paste and utilise a lot of code from vanilla Muuri, but there are some things that need a complete refactoring.

I have created a Muuri organisation here in GitHub in the hopes that it would be the place where all major Muuri related codebases would live in. Hopefully the core Muuri itself will be there also someday, but that decision is not in my hands. So the way we could kick this off is that I create the muuri-react repo there and add you guys to the Muuri organisation as members or outside collaborators, your choice. How does this sound?

Personally I don't have so much time in my hands to devote to this as I'd like, but I do have some. Would be awesome if we could kickstart this together.

[awreccan]

@niklasramo That sounds great, you can add @awreccan and @realsoelynn as members to the Muuri org.

[niklasramo]

@awreccan done 🙂 also, here's the repo: https://github.com/muurijs/react-muuri

[reyronald]

Hello! Just wanted to say that my organization is in the design phase for a module in our product that will require draggable components. It's kinda of a designer tool for interactive forms. We've been playing around with react-grid-layout for the MVP since it's basically the only mature option that I could find that fits our needs, but Muuri looks very promising as well and I would love to try it and compare before we start its development formally.

If the React version of Muuri ends up being appropriate for our use-case, I'd love to adopt it formally and of course I see it as an option that we would end up contributing in the future!

Looking forward to it!

[niklasramo]

@reyronald Great to hear! Just hoping I can pull out some time soon to get the groundwork done for it.

[niklasramo]

Hi everyone! Just wanted to inform you that unfortunately I haven't yet had the time to start working on the React version, and don't know when that's going to happen exactly. I know there are a lot of people waiting to get their hands on the React version so if anyone's up for the challenge I'm more than willing to help out with the process. Just can't devote so much dev time to it right now.

[fionawhim]

@niklasramo I'm interested in hearing what you think would be involved. I'm pretty comfortable with React and could help out on that end, though I'm not very adept at handling intensive JS performance concerns.

[niklasramo]

@finneganh first of all thanks for the interest! There are two paths one could take here. The easier and faster path is just creating a React wrapper for Muuri. The harder path (with more performance gains) is rewriting Muuri for React. I'm not sure how much of Muuri needs to be rewritten for the latter option, but there are quite a lot of opportunities there to make Muuri faster by utilizing the virtual dom. I guess the first step would be just building a proof of concept React wrapper and building on that little by little.

[wellitongervickas]

Project with react lost?

[niklasramo]

@wellitongervickas React version has not even been started yet, at least by me. Maybe someone else here has made some headway with it.

[kirgene]

Any updates on React integration?

[mjtischler]

I've started on a React implementation of Muuri, which is definitely a WIP:

https://github.com/mjtischler/react-muuri

There are a few outstanding issues and much more work ahead, so any help or feedback would be appreciated. Many thanks to @niklasramo for the awesome work done thus far.

[brianespinosa]

Thanks @mjtischler 👍

I don't even recall the project I initially needed Muuri for but I have stayed subscribed to this thread in hopes I would someday be able to do things with it in React.

[mesh-newbie]

Just following up on this old thread and wondered if Muuri is now compatible with React?

[niklasramo]

@mesh-newbie If you want to use Muuri with React you can try to use the react-muuri fork by @mjtischler or you can use Muuri like any third party lib with React: https://reactjs.org/docs/integrating-with-other-libraries.html. I have successfully used Muuri with the latter approach, although it wasn't that pretty.

Personally I'm not planning to add any framework specific code to Muuri itself, the plan is to keep it vanilla :) But I might create a dedicated React lib that uses Muuri behind the scenes and abstracts the functionality into hook(s)/components (given I find the time to do that at some point).

[mesh-newbie]

I look forward to seeing the react lib when it comes out... :-)

[bluefire2121]

@mesh-newbie If you want to use Muuri with React you can try to use the react-muuri fork by @mjtischler or you can use Muuri like any third party lib with React: https://reactjs.org/docs/integrating-with-other-libraries.html. I have successfully used Muuri with the latter approach, although it wasn't that pretty.

Personally I'm not planning to add any framework specific code to Muuri itself, the plan is to keep it vanilla :) But I might create a dedicated React lib that uses Muuri behind the scenes and abstracts the functionality into hook(s)/components (given I find the time to do that at some point).

Can you share your example of your third party library approach?

[paol-imi]

@mesh-newbie If you want to use Muuri with React you can try to use the react-muuri fork by @mjtischler or you can use Muuri like any third party lib with React: https://reactjs.org/docs/integrating-with-other-libraries.html. I have successfully used Muuri with the latter approach, although it wasn't that pretty.

Personally I don't like to work with the approach that react proposes.

So I developed an alternative to react-muuri, more react friendly. With little imagination I called it muuri-react, The big changes are:

• A custom component is provided that manage the muuri instance
• The items are passed as children to the component, on each re-render the component will notice if an item has been added/removed and will add/remove it from the muuri instance automatically (muuri.add(newItems) becomes setState(items => items.concat(newItems))
• The sorting/filtering is managed via components props

Practically you interact with muuri through the component insted of using the muuri instance. Here are the links, If you like the lib leave a star 😉.

• Github
• Codesandbox Demo

[bluefire2121]

@mesh-newbie If you want to use Muuri with React you can try to use the react-muuri fork by @mjtischler or you can use Muuri like any third party lib with React: https://reactjs.org/docs/integrating-with-other-libraries.html. I have successfully used Muuri with the latter approach, although it wasn't that pretty.

Personally I don't like to work with the approach that react proposes.

So I developed an alternative to react-muuri, more react friendly. With little imagination I called it muuri-react, The big changes are:

• A custom component is provided that manage the muuri instance
• The items are passed as children to the component, on each re-render the component will notice if an item has been added/removed and will add/remove it from the muuri instance automatically (muuri.add(newItems) becomes setState(items => items.concat(newItems))
• The sorting/filtering is managed via components props

Practically you interact with muuri through the component insted of using the muuri instance. Here are the links, If you like the lib leave a star 😉.

• Github
• Codesandbox Demo

Really great work, my friend. Any plans to do this in jsx and typescript?

[paol-imi]

Not in the near future because I'm a university student and I don't have much free time.
I created the library because I needed it for a university project and knowing this issue I wrote a quick readme and shared it here. Maybe I will update it in a few months.

Thanks for the feedback 😁

[Hari-Shankar-3296]

@bluefire2121 I wanted to implement Muuri with React, So I have created a sample implementation for ReactJS version of Muuri which has grid to grid DND and Resizing grid items on right click ( shoul work like react-grid-layout ).

But you need to change the Grid initialization part by replacing it with a custom a hook
instead of creating each ref with useRef to make it dynamic.  

Hope it helps 💯 https://codesandbox.io/s/muuribasic-with-react-gird-layout-with-muuri-gjvmp

[paol-imi]

Muuri-react v3.0.0 has been published. New documentation website 📖.

Demos on codesanbox

• grid
• kanban

[dcsan]

thanks @Paol-imi ! how clean is your react port do you think? eg if a new version of muuri is released did you have to make some big changes to package it with react?

I remember some non-react library wrappers like for slick-carousel that bundled the whole thing as is, with query and everything... so just a bit worried about adopting stuff that wasn't designed for react by it's creator...

[brianespinosa]

@dcsan you could always just go look at the code yourself. We are on Github after all. The package.json for the library lists all package dependencies.

[kongweiying2]

@niklasramo What would it take for you to make a React version? As I've sleuthed, I understand that you're time limited and wanting to get a v1 out. But even despite its incompleteness, this looks like the best library out there!

I really want to sponsor you but I feel like a couple of dollars a month from me isn't enough to shift things substantially. I can also help with an official React version as well, so I'm happy to contribute both my time and money. But ultimately, I'd want to do things that help you shift the barriers that prevent this from growing and being developed more. So is there anything I can do to help?

[niklasramo]

@TheAussieStew Thank you for the kind words and the offer to help out :)

My time is indeed limited and that already kinda answers the question, I would need more time and a few (or even one) motivated core collaborators to make things moving forward with a faster pace. And as my personal finances rely on having a job that extra time can be only acquired with money at the moment, unfortunately. I would be happy to work one or two days a week on Muuri if there was enough sponsoring income to allow that and spend less time doing my primary job, and I think that kind of arrangement would already be quite sufficient to keep Muuri in a good shape and progress new features faster.

In an ideal scenario I would be employed by a company that uses Muuri and could work on it on the job. Or, alternatively, I would have a side-project of my own that uses Muuri. Eating your own dog food is a good practice when developing any library. At the moment I actually don't have any real-world projects where I'm using Muuri so that is also a bit problematic when trying to design the API and figure out use-cases.

As for the React version, I have been hoping that the community would take the lead on that and gladly there are a few React wrappers already on Github, e.g. https://github.com/Paol-imi/muuri-react. However, in all honesty, I haven't tried any of them in a real project myself yet (even though I've been doing basically non-stop React projects for the last 3 years) so can't really comment on their quality etc. Do you feel like there is a need for an "official" React version?

In addition to the things mentioned above I'd love to get help with building a more active community around Muuri. At the moment my only visibility to the community is the issues page. It probably gives a good picture on the frustration points of Muuri, but I feel like it's lacking a bit when trying to advance Muuri and get feedback from the community on new features etc. (or maybe there just aren't that many people keeping an eye on the repo).

[dcsan]

you could maybe open a discussions tab?

in response to this i checked what I think is the original package.json and it seems there are devDependencies but no external JS modules used?

[kongweiying2]

@niklasramo

I see! Is there an approximate monetary figure that you could attach to one day's of your opportunity cost? If there is a goal, then maybe the community (including myself) can rally towards it.

I think regarding an "official" React version, the one made by Paol seems okay from my limited usage. There seem to be some quirks around the design but yet again, I've only used it for roughly 1 week so I would have to look into it further to make any definitive comment. Something I have identified is that child components of the MuuriComponent have to be in a child array of JSX.Elements as seen here. You can't declare child components in JSX which seems really strange for a React library. I feel like if you did have the time, you could probably come up with a more intuitive design but to me it doesn't really matter either way.

Regarding real world usage, API design and use cases, I do have some ideas that would make Muuri much more useful for me and probably other people too. I think that these ideas would give Muuri some unique features over other libraries and make it even better than it already is. I'll probably post these in another issue once I'm more familiar with the design of the library, and the commentary in other past issues. These ideas have nothing to do with virtualisation or what's been already suggested.

I did notice that your solicitation for feature suggestions and feedback on new releases didn't receive too many responses. Especially for a library with this many stars. I'm not really sure why this is. However, I personally do think Muuri could do with one "killer app" and that would probably set the ball rolling. For example, if we look at https://github.com/STRML/react-grid-layout they have really "reputable users". Imagine if you could get similar companies using Muuri! It'd probably be a joy to work for them, like you said before. While I'm not a "reputable user" I am trying to build that one "killer app" and Muuri does seem to be the best out of the dozens of libraries I've looked at across the React and JS eco-systems.

[paol-imi]

If anyone has any suggestions or opinions on Muuri-React I would like to take a look at them. In the future, if there are the opportunity and the need for an "official" release for React, the Muuri-React codebase could be a solid starting point.

@TheAussieStew

Just for clarification, In the example you reported, the children can be moved from one component to another, and therefore they must be declared dynamically. It is however possible to write JSX directly inside the component.

[kongweiying2]

Just for clarification, In the example you reported, the children can be moved from one component to another, and therefore they must be declared dynamically. It is however possible to write JSX directly inside the component.

@Paol-imi

I see! I may be mistaken but I've been using Typescript with your library and the typing for the children of MuuriComponent is JSX.Element array or something like that. I understand your comment about the rearranging, however I initially saw this quirk in another single list example. It could be that it just works fine in JavaScript, in which case, the solution for the TS version could be as simple as just changing some types 🤷‍♂️

And I agree! Muuri-React would be a great starting point. Yet again, like I said in my issue on the muuri-react repo, thanks for maintaining the repo - I could see that a lot of work went into just from the website.

[niklasramo]

@dcsan

Discussions tab opened 👍 and yep, Muuri has no direct dependencies (only dev dependencies).

@TheAussieStew

I set my first sponsorship goal, 300$ per month, which would translate to spending one full day working on Muuri :) I'll up that when/if I reach that goal. Btw, do you think those tiers are ok or should there be something e.g. between 1$ and 10$?

And I would love to hear any ideas you have for making Muuri better, open an issue/discussion and let's chat there more :) Also best of luck with that killer app, can't wait to see it 👍

@Paol-imi

I bet muuri-react would be a solid starting point for an official React version ;) Thanks for all the work you've done, it's not an easy task to map Muuri's API to React elegantly. I gotta take it for a test drive one of these days.

[kongweiying2]

@niklasramo

I think maybe something between them would be good. Like $5 or something. And maybe for the very expensive tiers you could offer to look into some features or something like that. But obviously not to the extent of bribing you for your input!