32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
|
// https://github.com/wojtekmaj/react-hooks/blob/main/src/useResizeObserver.ts
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Observes a given element using ResizeObserver.
|
||
|
|
*
|
||
|
|
* @param {Element} [element] Element to attach ResizeObserver to
|
||
|
|
* @param {ResizeObserverOptions} [options] ResizeObserver options. WARNING! If you define the
|
||
|
|
* object in component body, make sure to memoize it.
|
||
|
|
* @param {ResizeObserverCallback} observerCallback ResizeObserver callback. WARNING! If you define
|
||
|
|
* the function in component body, make sure to memoize it.
|
||
|
|
* @returns {void}
|
||
|
|
*/
|
||
|
|
export default function useResizeObserver(
|
||
|
|
element: Element | null,
|
||
|
|
options: ResizeObserverOptions | undefined,
|
||
|
|
observerCallback: ResizeObserverCallback,
|
||
|
|
): void {
|
||
|
|
useEffect(() => {
|
||
|
|
if (!element || !('ResizeObserver' in window)) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
const observer = new ResizeObserver(observerCallback);
|
||
|
|
|
||
|
|
observer.observe(element, options);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
observer.disconnect();
|
||
|
|
};
|
||
|
|
}, [element, options, observerCallback]);
|
||
|
|
}
|