2020-11-09 09:52:22 -05:00
|
|
|
import { useLayoutEffect, useRef } from 'react'
|
|
|
|
|
|
|
|
function useResizeObserver(observedElement, observedData, callback) {
|
|
|
|
const resizeObserver = useRef()
|
|
|
|
|
|
|
|
function observe() {
|
|
|
|
resizeObserver.current = new ResizeObserver(function(elementsObserved) {
|
|
|
|
callback(elementsObserved[0])
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
function unobserve(observedCurrent) {
|
|
|
|
resizeObserver.current.unobserve(observedCurrent)
|
|
|
|
}
|
|
|
|
|
2020-12-15 05:23:54 -05:00
|
|
|
useLayoutEffect(() => {
|
|
|
|
if ('ResizeObserver' in window) {
|
|
|
|
const observedCurrent = observedElement && observedElement.current
|
|
|
|
if (observedCurrent) {
|
|
|
|
observe(observedElement.current)
|
|
|
|
}
|
2020-11-09 09:52:22 -05:00
|
|
|
|
2020-12-15 05:23:54 -05:00
|
|
|
if (resizeObserver.current && observedCurrent) {
|
|
|
|
resizeObserver.current.observe(observedCurrent)
|
|
|
|
}
|
2020-11-09 09:52:22 -05:00
|
|
|
|
2020-12-15 05:23:54 -05:00
|
|
|
return () => {
|
|
|
|
if (observedCurrent) {
|
|
|
|
unobserve(observedCurrent)
|
2020-11-09 09:52:22 -05:00
|
|
|
}
|
|
|
|
}
|
2020-12-15 05:23:54 -05:00
|
|
|
}
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
}, [observedElement, observedData])
|
2020-11-09 09:52:22 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export default useResizeObserver
|