Lotus Bot
61a1f008d0
- i18next 23->26 + react-i18next 15->17 - prettier 2->3, reformat all files - replace @fontsource/inter with @fontsource-variable/inter 5, update import path - domhandler 5->6 (aligns with transitive deps) - lint-staged 16->17
28 lines
943 B
TypeScript
28 lines
943 B
TypeScript
import { useEffect, useMemo } from 'react';
|
|
|
|
export type OnResizeCallback = (entries: ResizeObserverEntry[]) => void;
|
|
|
|
export const getResizeObserverEntry = (
|
|
target: Element,
|
|
entries: ResizeObserverEntry[],
|
|
): ResizeObserverEntry | undefined => entries.find((entry) => entry.target === target);
|
|
|
|
export const useResizeObserver = (
|
|
onResizeCallback: OnResizeCallback,
|
|
observeElement?: Element | null | (() => Element | null),
|
|
): ResizeObserver => {
|
|
const resizeObserver = useMemo(() => new ResizeObserver(onResizeCallback), [onResizeCallback]);
|
|
|
|
useEffect(() => () => resizeObserver?.disconnect(), [resizeObserver]);
|
|
|
|
useEffect(() => {
|
|
const element = typeof observeElement === 'function' ? observeElement() : observeElement;
|
|
if (element) resizeObserver.observe(element);
|
|
return () => {
|
|
if (element) resizeObserver.unobserve(element);
|
|
};
|
|
}, [resizeObserver, observeElement]);
|
|
|
|
return resizeObserver;
|
|
};
|