39 lines
753 B
TypeScript
39 lines
753 B
TypeScript
import { type RefObject, useLayoutEffect, useRef } from 'react'
|
|
|
|
export function useResizeObserver(onResize: () => void, ...refs: readonly RefObject<Element | null>[]) {
|
|
const refsRef = useRef(refs)
|
|
refsRef.current = refs
|
|
|
|
useLayoutEffect(() => {
|
|
if (typeof ResizeObserver === 'undefined') {
|
|
onResize()
|
|
|
|
return
|
|
}
|
|
|
|
const observer = new ResizeObserver(() => onResize())
|
|
let observed = false
|
|
|
|
for (const ref of refsRef.current) {
|
|
const element = ref.current
|
|
|
|
if (!element) {
|
|
continue
|
|
}
|
|
|
|
observer.observe(element)
|
|
observed = true
|
|
}
|
|
|
|
if (!observed) {
|
|
observer.disconnect()
|
|
|
|
return
|
|
}
|
|
|
|
onResize()
|
|
|
|
return () => observer.disconnect()
|
|
}, [onResize])
|
|
}
|