aboutsummaryrefslogtreecommitdiffstats
path: root/src/utils/hooks/use-mutation-observer.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/utils/hooks/use-mutation-observer.tsx')
-rw-r--r--src/utils/hooks/use-mutation-observer.tsx28
1 files changed, 28 insertions, 0 deletions
diff --git a/src/utils/hooks/use-mutation-observer.tsx b/src/utils/hooks/use-mutation-observer.tsx
new file mode 100644
index 0000000..c56f7aa
--- /dev/null
+++ b/src/utils/hooks/use-mutation-observer.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+type UseMutationObserverProps = {
+ callback: () => void;
+ options: MutationObserverInit;
+ nodeOrSelector: string | HTMLElement;
+};
+
+export const useMutationObserver = ({
+ callback,
+ options,
+ nodeOrSelector,
+}: UseMutationObserverProps) => {
+ useEffect(() => {
+ const targetNode =
+ typeof nodeOrSelector === 'string'
+ ? document.querySelector(nodeOrSelector)!
+ : nodeOrSelector;
+
+ const observer = new MutationObserver(callback);
+
+ observer.observe(targetNode, options);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [nodeOrSelector, options, callback]);
+};