souporserious/react-measure

React Measure is only called for first time

emonno13 opened this issue · 1 comments

emonno13 commented

I have an issue with the height of the scroll change.

Step 01: I load the page.

  • Topbar is shown
  • Height: 426
  • Show scroll
    image

Step 02: Click a button to hide the top bar.

  • React Measure work
  • Height: 491
  • Show scroll
    image

Step 03: Click a button to show the top bar again.

  • React Measure does not work
  • Height: 491 ( must be 426 )
  • Scroll is clipped
    image

I don't know why React-measure did not trigger when the top bar is shown again.

Here is my code:

image

souporserious commented

Hm I'm not sure why the ResizeObserver wouldn't be picking this up 🤨 maybe due to children being virtualized. I'm pretty busy right now so I won't be able to look into the library itself for a bit, but I think you should be able to grab a ref to the Measure component and call the internal measure method yourself to update the dimensions:

function App() {
  const ref = React.useRef()
  return (
    <div>
      <button onClick={() => ref.current.measure()}>
        Measure programmatically
      </button>
      <Measure ref={ref}>...</Measure>
    </div>
  )
}
  • 👍2