updating the breakpointCols object doesn't update the app until i manually resize it

[hardtekpt]

Having a sidebar in my app I would like the columns to update with the sidebar being open or not. To do this i updated the breakpointCols object with new values but it doesn't change the app until i manually change the window size. Not sure if I'm being clear or not, but hope the images bellow help.

As you can see here the columns are displaying correctly

However when I open the sidebar the breakpoint values get updated but not the app. In this case there should be only 2 columns

The desired behaviour only occurs when i resize the windows itself

I would really appreciate if someone could help me fix this

EDIT:

here's the code: (For whatever reason I can't format it here) I swapped the code for an image as I could not format it right

[paulcollett]

it's possible to trigger a refresh manually, by using a ref on the component and calling the reCalculate function.

Ideally when changing you specify new breakpoint col values we do update the layout accordingly. I'm going to look into making sure this piece works

[hardtekpt]

Thanks for helping!!

Can you explain this manual refresh pls. Maybe with an example. Also if you need any other parts of the code I can provide them

[rotev]

@paulcollett is referring to the reCalculateColumnCount method defined here: https://github.com/paulcollett/react-masonry-css/blob/85083b8143e6b25a1b083ba19d81e777bb64b4bc/src/react-masonry-css.js#L42

Implementing the above solution would look something like that:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.masonryRef = React.createRef();
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const masonry = this.masonryRef.current;
    masonry && masonry.reCalculateColumnCount();
  }

  render() {
    const { breakpointCols } = this.props;
    return <Masonry ref={ this.masonryRef } breakpointCols={ breakpointCols } />
  }
}