[@mantine/hooks] use-mutation-observer: Init hook

packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.story.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useInterval } from '@mantine/hooks';
 import { FloatingIndicator } from './FloatingIndicator';
 
 export default { title: 'FloatingIndicator' };
@@ -75,3 +76,35 @@ export function ResizableTarget() {
     </div>
   );
 }
+
+export function ScaledElement() {
+  const [targetRef, setTargetRef] = React.useState<HTMLDivElement | null>(null);
+  const [parentRef, setParentRef] = React.useState<HTMLDivElement | null>(null);
+  const [scale, setScale] = React.useState(1);
+  const interval = useInterval(() => setScale(Math.random()), 500);
+
+  React.useEffect(() => {
+    interval.start();
+  }, []);
+
+  return (
+    <div style={{ padding: 40 }}>
+      <div ref={(node) => setParentRef(node!)} style={{ position: 'relative' }}>
+        <div
+          ref={(node) => setTargetRef(node!)}
+          style={{
+            padding: 20,
+            background: 'pink',
+            width: 200,
+            height: 200,
+            transition: 'transform 100ms',
+            transform: `scale(${scale})`,
+          }}
+        >
+          Resizable target
+        </div>
+        <FloatingIndicator target={targetRef} parent={parentRef} />
+      </div>
+    </div>
+  );
+}

packages/@mantine/hooks/src/index.ts

@@ -61,6 +61,7 @@ export { useFavicon } from './use-favicon/use-favicon';
 export { useHeadroom } from './use-headroom/use-headroom';
 export { useEyeDropper } from './use-eye-dropper/use-eye-dropper';
 export { useInViewport } from './use-in-viewport/use-in-viewport';
+export { useMutationObserver } from './use-mutation-observer/use-mutation-observer';
 
 export type { UseMovePosition } from './use-move/use-move';
 export type { OS } from './use-os/use-os';

packages/@mantine/hooks/src/use-mutation-observer/use-mutation-observer.ts

@@ -0,0 +1,25 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+export function useMutationObserver<Element extends HTMLLIElement>(
+  callback: MutationCallback,
+  options: MutationObserverInit,
+  target?: HTMLElement | (() => HTMLElement) | null
+) {
+  const observer = useRef<MutationObserver>();
+  const ref: RefObject<Element> = useRef(null);
+
+  useEffect(() => {
+    const targetElement = typeof target === 'function' ? target() : target;
+
+    if (targetElement || ref.current) {
+      observer.current = new MutationObserver(callback);
+      observer.current.observe(targetElement || ref.current!, options);
+    }
+
+    return () => {
+      observer.current?.disconnect();
+    };
+  }, [callback, options]);
+
+  return ref;
+}