React-grid-layout: resize items, when react-grid-layout(div) width is changed

[MaksZhukov]

For example, we have sider on the left and react-grid-layout(div) on the right.
We toggle the sider, then the width of the react-grid-layout(div) is changed, but items are not resized.

[bartoszkrawczyk2]

You can trigger resize event when you expand/collapse sidebar:

window.dispatchEvent(new Event('resize'));

[mnemanja]

@MaksZhukov Can you please confirm that this solved your issue? Thanks!

[akritskiy]

@bartoszkrawczyk2
This worked for me. If you have a transition on your sidebar, you can do a setTimeout at 0ms, 10ms, 20ms, etc. until the end of your transition to make the resize smooth.

for (let t = 0; t <= 300; t += 10) {
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'))
  }, t)
}