edit

resources/[tools]/mt_lib/web/src/hooks/useNuiEvent.ts

@@ -0,0 +1,35 @@
+import { MutableRefObject, useEffect, useRef } from "react";
+import { noop } from "../utils/misc";
+
+interface NuiMessageData<T = unknown> {
+  action: string;
+  data: T;
+}
+
+type NuiHandlerSignature<T> = (data: T) => void;
+
+export const useNuiEvent = <T = unknown>(
+  action: string,
+  handler: (data: T) => void,
+) => {
+  const savedHandler: MutableRefObject<NuiHandlerSignature<T>> = useRef(noop);
+
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    const eventListener = (event: MessageEvent<NuiMessageData<T>>) => {
+      const { action: eventAction, data } = event.data;
+
+      if (savedHandler.current) {
+        if (eventAction === action) {
+          savedHandler.current(data);
+        }
+      }
+    };
+
+    window.addEventListener("message", eventListener);
+    return () => window.removeEventListener("message", eventListener);
+  }, [action]);
+};