0

If have two elements, then I can refer from one of those to the other using useRef. The result of useRef is a reference to the element, lets call it exampleRef.

Is it possible to react to a size change of that element (e.g. on exampleRef.current.offsetHeight)?

I tried to use the following, which is unfortunately not firing when the referenced element is resized:

useEffect ( () => {
    // ... do something with exampleRef.current.offsetHeight
}, [exampleRef]);
ataraxis
  • 1,257
  • 1
  • 15
  • 30
  • Does this answer your question? [Rerender view on browser resize with React](https://stackoverflow.com/questions/19014250/rerender-view-on-browser-resize-with-react) – Rigorous implementation Dec 23 '20 at 00:11
  • no, unfortunately not because the element is not only resized because of a window resize event, but also because of a layout shift due to a collapsable menu. I changed the question - I fear it was a bit ambiguous – ataraxis Dec 23 '20 at 00:19
  • 1
    Use a ResizeObserver: https://stackoverflow.com/a/39312522/996081 – cbr Dec 23 '20 at 00:20
  • @cbr that's interesting! Thank you for the hint – ataraxis Dec 23 '20 at 00:22

1 Answers1

0

Thanks to @cbr's comment the solution for my problem seems to be the so called ResizeOberver (which is, unfortunately, not supported by FirefoxMobile).

Anyway, here is a working example using a react module that is using the ResizeObserver: https://codesandbox.io/s/pensive-darwin-6bftu?file=/src/index.js

Another module that is using Hooks can be found here https://www.npmjs.com/package/react-resize-aware

ataraxis
  • 1,257
  • 1
  • 15
  • 30