29 lines
818 B
TypeScript
29 lines
818 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;
|