overleaf/services/web/frontend/js/shared/hooks/use-resize-observer.js

37 lines
974 B
JavaScript
Raw Normal View History

import { useLayoutEffect, useRef, useCallback } from 'react'
function useResizeObserver(observedElement, observedData, callback) {
const resizeObserver = useRef()
const observe = useCallback(() => {
resizeObserver.current = new ResizeObserver(function(elementsObserved) {
callback(elementsObserved[0])
})
}, [callback])
function unobserve(observedCurrent) {
resizeObserver.current.unobserve(observedCurrent)
}
useLayoutEffect(() => {
if ('ResizeObserver' in window) {
const observedCurrent = observedElement && observedElement.current
if (observedCurrent) {
observe(observedElement.current)
}
if (resizeObserver.current && observedCurrent) {
resizeObserver.current.observe(observedCurrent)
}
return () => {
if (observedCurrent) {
unobserve(observedCurrent)
}
}
}
}, [observedElement, observedData, observe])
}
export default useResizeObserver