useResizeObserver.ts

import { useEffect, useRef, useState } from "react"

interface UseResizeObserverReturns<T> {
    ref: React.RefObject<T>
    width: number
    height: number
}

const useResizeObserver = <T>(): UseResizeObserverReturns<T> => {
    const ref = useRef<T>(null)
    const [width, changeWidth] = useState(1)
    const [height, changeHeight] = useState(1)
    useEffect(() => {
        const element = ref.current
        // @ts-ignore
        const resizeObserver = new ResizeObserver(entries => {
            if (!Array.isArray(entries)) {
                return
            }
            if (!entries.length) {
                return
            }
            const entry = entries[0]
            changeWidth(entry.contentRect.width)
            changeHeight(entry.contentRect.height)
        })
        resizeObserver.observe(element)

        return () => resizeObserver.unobserve(element)
    }, [])
    return { ref, width, height }
}

export default useResizeObserver