26 lines
812 B
TypeScript
26 lines
812 B
TypeScript
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* A resizeObserver React hook that with useEffect attaches a ResizeObserver to the
|
|
* given element such that the given callback is invoked whenever the element is resized.
|
|
* <p>
|
|
* Care is taken to disconnect the ResizeObserver whenever either the element or the callback change.
|
|
*
|
|
* @param elem the element to listen for resizing
|
|
* @param callback the callback to invoke when the element is resized
|
|
*/
|
|
const useResizeObserver = (elem: HTMLElement, callback: ResizeObserverCallback): void => {
|
|
useEffect(() => {
|
|
if (!elem || !callback) {
|
|
return;
|
|
}
|
|
|
|
const resizeObserver = new ResizeObserver(callback);
|
|
resizeObserver.observe(elem);
|
|
|
|
return () => resizeObserver.disconnect();
|
|
}, [elem, callback]);
|
|
};
|
|
|
|
export default useResizeObserver;
|