anyone has reactjs using gristack example

[eagoo]

while https://github.com/pitrho/react-gridstack is not working

[DoctaWorm]

As much as I like gridstack and have been using it for about two years, if you're in a pure react environment I'd recommend looking into this one: https://github.com/STRML/react-grid-layout

[derwaldgeist]

Unfortunately, react-grid-layout doesn't work well on mobile (touch) devices. Is there another alternative? I also like gridstack, but the (fixed) dependencies on jQuery and jQueryUI are a problem for me.

[radiolips]

@derwaldgeist The dependencies will be removed in version 1. This has been delayed for no particularly good reason, but the dependencies will be removed. The resize/dragging functionality will need to be supplemented (I've only been working with one other plugin but any plugin should work - you'll also be able to roll your own if you'd like).

@eagoo shoot. I'm sorry. I think there are a few other react tickets open, but I'll leave this open for now. If anyone (anyone!) wants to participate in getting gridstack and react working in harmony, please do so. I'd be happy to link a working example it in the readme.

[jtheberge]

@eagoo I'm currently using React with this right now, and I prefer it over react-grid-layout because it uses absolute positioning rather than transformations to move things around, meaning any children with fixed positions aren't thrown off position.

The way you want to set it up is by letting React mount your initial widget(s) to the DOM first through its render, then with the lifecycle method componentDidMount(), initialize your grid and targetting where you want it initialized.
Example:

var grid = GridStack.init();

After each time you are adding a widget with React, make sure to then use the API method makeWidget() inside React's lifeycle method componentDidUpdate(), which makes the widget part of the grid directly after React mounts the new widget to the DOM.
Example:

grid.makeWidget(<element to make>);

When you remove a widget with React, you must first remove it from the grid system with the API method removeWidget(). Use the React lifecycle method componentWillUpdate() for this to ensure that you properly remove the item from the grid system before React deletes it from the DOM.
IMPORTANT: Make sure removeWidget option detachNode = false, because React is supposed to handle the DOM manipulation. Otherwise you will get an error such as: NotFoundError: Node was not found.
Example:

grid.removeWidget(<element to remove>, false);

I hope this was helpful for anyone wishing to incorporate this great plugin with React.

@radiolips I don't have an easy-to-read example currently, but I might be able to come up with something in the future if you need it. The setup shouldn't be too complex.

[ramigg]

@derwaldgeist thanks for your effort releasing V1.0. I'm working on a project based on react. Is it possible to use the develop branch right now without the jquery dependency?

[derwaldgeist]

@ramigg I'm not the maintainer, just a potential user :-)

[ramigg]

@derwaldgeist my mistake :)
I meant @radiolips - thanks for your efforts, please answer my question above.

[funkytek]

@jtheberge can you provide a gist or simple example repo of this working would be helpful

[radiolips]

Closing this ticket, but if someone gets in touch with me with a good react example, I'd be happy to link to it in the README. @ramigg this is obviously a very late response, but the 1.0 code isn't here. There will be a 0.x release probably this weekend, and I'll begin to get back on the 1.0 bandwagon.

[Inder2108]

Please refer this repo: https://github.com/Inder2108/react-gridstack-example
It may not be the ideal solution but works fine without any extra node package.

[adumesny]

@Inder2108 Thank you, will take a look. but it would be best to use the gridstack npm package (instead of CDN) as that would show actual download usage and help this package.

[adumesny]

@Inder2108 could you modify your example with gridstack 2.2 which you can now

import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.css';

and use npm package instead of CDN ? and does it follow @jtheberge example above ? (which matches the concept in VueJS example we supply)