resize hook

[Janpot]

I've been using this hook

 function useContentRect (ref) {
  const [contentRect, setContentRect] = useState(ref.current ? ref.current.getBoundingClientRect() : {});
  useEffect(() => {
    if (!ref.current) return;
    const observer = new window.ResizeObserver(entries => setContentRect(entries[0].contentRect));
    observer.observe(ref.current);
    return () => observer.disconnect(ref.current);
  }, [ref]);
  return contentRect;
}

To measure elements and react on size changes. Can be used as

function Component () {
  const ref = useRef(null);
  const { width, height } = useContentRect(ref);
  return <div ref={ref}>{width} {height}</div>;
}

Looks like something like this could be a nice addition to this library. If not, feel free to just close and ignore. 🙂

[sagar-gavhane]

@Janpot, I just playing 🤾‍♂️ around with useContentRect(ref). It's fantastic 👍 and first I'm a little bit confusing 😕 from its name. I think you should rename it something else so it can easily understand the meaning behind this logic. We have put a step ahead to include this hook inside the platform library.

I have created gist of this hook for later use. --> https://gist.github.com/sagar-gavhane/6b8b52978206242b4b7b7e16aeee4a8d

What's your opinion?

[Janpot]

I picked the name because it was consistent with the naming of properties in the ResizeObserver. I prefer to use the terms of the underlying platform if they make sense. Other than that, I don't really care how it's named.