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
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { useEffect, useMemo } from 'react';
|
|
|
|
export type OnMutationCallback = (mutations: MutationRecord[]) => void;
|
|
|
|
export const getMutationRecord = (
|
|
target: Node,
|
|
mutations: MutationRecord[],
|
|
): MutationRecord | undefined => mutations.find((mutation) => mutation.target === target);
|
|
|
|
export const useMutationObserver = (
|
|
onMutationCallback: OnMutationCallback,
|
|
observeElement?: Node | null | (() => Node | null),
|
|
options?: MutationObserverInit,
|
|
): MutationObserver => {
|
|
const mutationObserver = useMemo(
|
|
() => new MutationObserver(onMutationCallback),
|
|
[onMutationCallback],
|
|
);
|
|
|
|
useEffect(() => () => mutationObserver?.disconnect(), [mutationObserver]);
|
|
|
|
useEffect(() => {
|
|
const element = typeof observeElement === 'function' ? observeElement() : observeElement;
|
|
|
|
if (element) {
|
|
mutationObserver.observe(element, options);
|
|
}
|
|
|
|
return () => {
|
|
if (element) {
|
|
mutationObserver.disconnect();
|
|
}
|
|
};
|
|
}, [mutationObserver, observeElement, options]);
|
|
|
|
return mutationObserver;
|
|
};
|