Is there a way to resize masonic columns when sidebar close?

Question

I am trying to implement a masonry style layout in my reactjs website the package that i am currently using is masonic , Out of the other packages that I have tried it works the best so far but I am having a issue with resizing of the columns when I open and then reclose the sidebar.

When I first open the sidebar the columns resize fine to fit into the container but when I reclose the sidebar the columns does not resize to fit in the container.

The example above shows the columns resizing correctly when sidebar opens but not when it close.

Copy of code

import React, { useState, useEffect} from 'react'
import { Masonry, } from 'masonic';
import { useWindowSize } from '@react-hook/window-size';
import '../MasonryGridLayout.css';


export const GrideView = () => {
  const [isMobile, setIsMobile] = useState(false)
  const [refHeight, setheight] = useState(null)
  const [sideBar, setSideBar] = useState(false)
  const [windowWidth, height] = useWindowSize()

  const handleSidebar = () => {
    setSideBar(!sideBar)
    if (ref.current) {
      console.log('current')
    }
  }

  useEffect(() => {
    const handleMobile = () => {
      if (window.innerWidth <= 720) {
        setIsMobile(true)
      } else {
        setIsMobile(false)
      }
    }
    handleMobile()
  }, [])

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column'
    }}>
      <div className='header-style'>
        <button style={{
          width: 'auto',
          height: '20px',
          backgroundColor: 'teal',
          color: 'white',
          marginLeft: '20px',
         
        }}
          onClick={handleSidebar}
        >
          toggle Sidebar
        </button>
        <button style={{
          width: 'auto',
          height: '20px',
          backgroundColor: 'tan',
          color: 'white',
          marginLeft: '20px',
         
        }}
        >
          Upload
        </button>
      </div>
      <div className="wrapper">
        {
          isMobile ? null : sideBar ? <div className='side-bar-style'>
            this is a side bar
          </div> : null
        }
        <div className='masonic' style={{ height: `${refHeight}` }}>
          <Masonry
            // Provides the data for our grid items
            items={items}
            // Adds 8px of space between the grid cells
            columnGutter={8}
            maxColumnCount={sideBar ? 7 : 8}
            columnCount={windowWidth < 600 && 2}
            // Sets the minimum column width to 172px
            columnWidth={172}
            // Pre-renders 5 windows worth of content
            overscanBy={2}
            // This is the grid item component
            render={FakeCard}
          />
        </div>

      </div>
    </div>
  );
}


const FakeCard = ({ data: { postID, post, description } }) => (
  <div className='card-style' style={{ height: `${description}` }}>
    <img
      className='img-style'
      alt="kitty"
      src={post}
    />
  </div>
);

How can I get the column to resize correctly when the sidebar close ?

Answer 1

Have you tried the useResizeObserver() hook.

This hook creates a resize observer that forces updates to the grid cell positions when mutations are made to cells affecting their height.