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)

[Inder2108]

The example app (https://github.com/Inder2108/react-gridstack-example) is now updated to use imports instead of CDN urls in index.html. The example uses "useEffect" instead of "componentDidMount" and other lifecycle hooks as mentioned in @jtheberg 's example above.

[adumesny]

@Inder2108 thanks for the update - wondering why you didn't use 'componentDidMount' instead... and would be great to get a more complete example than just init() - adding widget and tracking changes, etc...

[Inder2108]

I had a functional component in my case so used useEffect - since "componentDidMount" is available for Class based React Components. Will update the example for both "useEffect" and "componentDidMount" and add widgets and tracking examples soon.

[ZachSAEON]

grid.makeWidget();

Thank you - that's quite a helpful pointer. Before reading this I was trying to figure out why just mapping grid-stack-items inside the gridstack container didn't work as expected

I'm struggling to make this work with a controlled component (where the items are received as props). Do you have any pointer?

[ZachSAEON]

An example based on the post by jtheberge above:

import { useEffect, createRef, useRef } from 'react'
import 'gridstack/dist/gridstack.min.css'
import { GridStack } from 'gridstack'
import 'gridstack/dist/h5/gridstack-dd-native'

export default ({someArray}) => {
  const refs = useRef({})
  
  if (Object.keys(refs.current).length !== someArray.length) {
    someArray.forEach(({ id }) => {
      refs.current[id] = refs.current[id] || createRef()
    })
  }

  useEffect(() => {
    const grid = GridStack.init()
    grid.removeAll(false)
    someArray.forEach(({ id }) => {
      grid.makeWidget(refs.current[id].current)
    })
  }, [someArray])

  return (
    <div className="grid-stack">
      {someArray?.map((item, i) => {
        return (
          <div
            ref={refs.current[item.id]}
            key={item.id}
            className={clsx('grid-stack-item', 'debug')}
            gs-w="12"
          >
            <div className="grid-stack-item-content">
              <Item {... etc} />
            </div>
          </div>
        )
      })}
    </div>
  )
}

[adumesny]

@ZachSAEON do you mind updating https://github.com/gridstack/gridstack.js/blob/develop/demo/react.html in a code review instead ?

[zachsa]

Hi. I'm not sure what you mean by a code review, I added a hooks example to the demo folder as a pull request.

My example does not completely work as intended though, since sometimes the items switch position when new items are added. The unexpected behavior is in the react-hooks.html file in the pull request, and can be seen as follows:

1. Move item 2 to top so that the order is item 2, item 1
2. Add a new widget (so that the order is now item 2, item 1, item 3)
3. Move item 3 to top (the new order is item 3, item 2, item 1)
4. Add a new widget

The order is now item 3, item 1, item 2, item 4. But the order SHOULD be item 3, item 2, item 1, item 4. I don't know why items 1 and 2 swap around in this case.

Could it be that since I'm removing all items and re-adding them from an array in the original order that this is causing problems (I don't know how the gridstack library works)?

  useEffect(() => {
    const grid = GridStack.init()
    grid.removeAll(false) // This seems like it is likely to be a problem
    someArray.forEach(({ id }) => {
      grid.makeWidget(refs.current[id].current)
    })
  }, [someArray])

Is it possible to check if a dom node has already been made into a widget? This seems like it might be a better idea:

  useEffect(() => {
    const grid = GridStack.init()
    items.forEach(({ id }) => {
      if (!grid.getWidgetById(refs.current[id].current)) {
        grid.makeWidget(refs.current[id].current)
      }
    })
  }, [items])

(Also. I think I read in the docs somewhere that calling GridStack.init() for the second time just returns the previously created instance of GridStack, meaning that it's okay to put the initialization in a useEffect hook where it is invoked many times)

[adumesny]

oh I didn't see this before your review. Yep all issues you brought up here I commented on them... better to do that in the review than pollute this bug thread.