How is it use in React?

[imlinus]

Hi,

I know there was talk about making a React port over here (https://github.com/e-oj/Magic-Grid/issues/1#issuecomment-437940490)

Though, I can't find anything yet :(

You are more than welcome to create your own React port, be sure to link it to @e-oj so he can add it to the readme 👍 :-)

Happy Holidays, ImLinus

[BigFaceMaster]

OK，I'll create react version。

[imlinus]

Happy days!! That's awesome 👍

[e-oj]

@BigFaceMaster You can also integrate it by creating a Magic Grid instance after the dom components have been created. I haven't used react but here's a Vue.js example.

[BigFaceMaster]

Yes, but I think the react version is better for react.

[e-oj]

@BigFaceMaster Yeah I'd like a React version. I'll leave this issue open till you're done. Post back here when its ready so I'll add it to the readme.

Merry Christmas 🎅

[BigFaceMaster]

OK, I'll tell you when I finish it. Merry Christmas~~~

[IniZio]

Porting to React at https://github.com/IniZio/React-Magic-Grid which basically mirrors https://github.com/imlinus/Vue-Magic-Grid. But I am not sure if using this way of actually importing magic-grid and instantiating it at componentDidMount is better :thinking:

[e-oj]

@IniZio It's hard to say which method is better. Some like the plain JS approach while others might prefer a component that's built for their frontend framework. It's best to have both options available so everyone is covered.

A few of the functions have changed since @imlinus made the Vue.js port. I've modified the setup and positionItems functions to increase efficiency and the getMax utility function has been removed completely. Update your functions to match the updated functions. @imlinus, you should do the same for vue-magic-grid.

Thanks a lot for contributing guys, I really appreciate it. 👍 👍

[IniZio]

I think its better to not duplicate logic across frameworks though, otherwise behaviours might differ between them. Nearly all of the logic can be reused if container selector part is refactored.

[e-oj]

Nearly all of the logic can be reused if container selector part is refactored.

Refactored how?

[IniZio]

Someone took the name react-magic-grid though, using magic-grid-react instead for now :/

[imlinus]

I'll take a look at the code sometime later this week, today I'm too hungover 😁🖖

Happy new year lads ❤

[e-oj]

@IniZio I've added your repo to the readme. Try to get the code up to date though.

[IniZio]

Updated React version so that it use reusing almost all of magic-grid's code as peerDependencies :)