TypeScript-friendly useSize from @react-hook/resize-observer.

So you went to https://www.npmjs.com/package/@react-hook/resize-observer and copied useSize, but it has a bunch of typescript errors, and it pisses you off (I know it does).

Here’s a version that is TypeScript-friendly… And not just that, it’s a complete file you can put in your project and import from your components:

import useResizeObserver from "@react-hook/resize-observer"
import { useLayoutEffect, useState } from "react"

const useSize = (target:any) => {
  const [size, setSize] = useState<DOMRectReadOnly>()

  useLayoutEffect(() => {
    setSize(target.current.getBoundingClientRect())
  }, [target])

  // Where the magic happens
  useResizeObserver(target, (entry) => setSize(entry.contentRect));
  return size
}

export default useSize;

---

Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.