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

Uh oh!

anyone has reactjs using gristack example #735

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions