fivem-nui-react 1.1.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mustafa Burak Güneş
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -10,28 +10,46 @@ npm install fivem-nui-react
 
 ## Features
 
-- **useNuiEvent** - Listen for NUI messages from Lua
-- **fetchNui** - Send requests to Lua client and receive responses
-- **useNuiCallback** - Hook for NUI requests with loading/error states and callback
-- **useSendNui** - Hook for sending data without expecting a response
-- **isEnvBrowser** - Check if running in browser (debug mode)
-- **Mock data support** - Test your UI in browser with simulated responses
+```tsx
+// Listen for NUI messages from FiveM client
+useNuiEvent("eventName", (data) => {});
 
-## API Reference
+// Send request and get response
+const data = await fetchNui("eventName", { payload });
 
-### useNuiEvent
+// Hook with loading/error states and callback
+const [fetch, { loading, error }] = useNuiCallback("eventName", (data) => {});
 
-Listen for NUI messages sent from Lua.
+// Send data without expecting response
+const [send, { loading, error }] = useSendNui("eventName");
 
-```tsx
-useNuiEvent<T>(action: string, handler: (data: T) => void, options?: UseNuiEventOptions<T>): void
+// Check if running in browser (debug mode)
+if (isEnvBrowser())
 ```
 
-**Parameters:**
+```lua
+-- Send message from FiveM client to UI
+SendNUIMessage({ action = "eventName", data = { key = "value" } })
+
+-- Register callback for UI requests
+RegisterNUICallback("eventName", function(data, cb)
+  cb({ response = "data" })
+end)
+```
+
+## API
+
+### useNuiEvent
 
-- `action` - The action name to listen for
-- `handler` - Callback function executed when message is received
-- `options` - Optional mock data configuration for browser testing
+Listen for NUI messages sent from FiveM client.
+
+```tsx
+useNuiEvent<T>(
+  action: string,
+  handler: (data: T) => void,
+  options?: { mockData?: T; mockDelay?: number }
+): void
+```
 
 **Example:**
 
@@ -41,11 +59,6 @@ import { useNuiEvent } from "fivem-nui-react";
 function App() {
   const [visible, setVisible] = useState(false);
 
-  useNuiEvent<{ show: boolean }>("toggleUI", (data) => {
-    setVisible(data.show);
-  });
-
-  // With mock data for browser testing
   useNuiEvent<{ show: boolean }>("toggleUI", (data) => setVisible(data.show), {
     mockData: { show: true },
     mockDelay: 1000,
@@ -55,7 +68,7 @@ function App() {
 }
 ```
 
-**Fivem client side:**
+**FiveM Client (Lua):**
 
 ```lua
 SendNUIMessage({
@@ -68,53 +81,53 @@ SendNUIMessage({
 
 ### fetchNui
 
-Send a request to the Fivem client and receive a response.
+Send a request to the FiveM client and receive a response.
 
 ```tsx
-fetchNui<T, D>(eventName: string, data?: D, options?: FetchNuiOptions<T>): Promise<T>
+fetchNui<T, D>(
+  eventName: string,
+  data?: D,
+  options?: { mockData?: T; mockDelay?: number; signal?: AbortSignal }
+): Promise<T>
 ```
 
-**Parameters:**
-
-- `eventName` - The NUI callback event name
-- `data` - Data to send to Lua
-- `options` - Optional mock data configuration for browser testing
-
 **Example:**
 
 ```tsx
 import { fetchNui } from "fivem-nui-react";
 
-interface PlayerData {
-  name: string;
-  level: number;
-}
+const player = await fetchNui<PlayerData>(
+  "getPlayerData",
+  { id: 1 },
+  {
+    mockData: { name: "John", level: 10 },
+    mockDelay: 500,
+  },
+);
+```
 
-async function getPlayer() {
-  const player = await fetchNui<PlayerData>("getPlayerData", { id: 1 });
-  console.log(player.name, player.level);
-}
+**With AbortController:**
 
-// With mock data for browser testing
-async function getPlayerMocked() {
-  const player = await fetchNui<PlayerData>(
-    "getPlayerData",
-    { id: 1 },
-    {
-      mockData: { name: "John", level: 10 },
-      mockDelay: 500,
-    },
-  );
-  console.log(player.name, player.level);
-}
+```tsx
+const controller = new AbortController();
+
+const player = await fetchNui<PlayerData>(
+  "getPlayerData",
+  { id: 1 },
+  {
+    signal: controller.signal,
+  },
+);
+
+// Cancel the request
+controller.abort();
 ```
 
-**Lua side:**
+**FiveM Client (Lua):**
 
 ```lua
 RegisterNUICallback("getPlayerData", function(data, cb)
   local playerId = data.id
-  -- Fetch player data...
   cb({ name = "John", level = 10 })
 end)
 ```
@@ -123,48 +136,28 @@ end)
 
 ### useNuiCallback
 
-A hook that wraps `fetchNui` with loading and error state management.
+Hook for NUI requests with loading/error states. Calls the callback with response data.
 
 ```tsx
 useNuiCallback<T, D>(
   eventName: string,
   callback: (data: T) => void,
-  options?: UseNuiCallbackOptions<T>
-): [fetchFn: (data?: D) => Promise<T>, state: { loading: boolean, error: Error | null }]
+  options?: { mockData?: T; mockDelay?: number }
+): [(data?: D) => Promise<T>, { loading: boolean; error: Error | null }]
 ```
 
-**Parameters:**
-
-- `eventName` - The NUI callback event name
-- `callback` - Callback function executed when response is received
-- `options` - Optional mock data configuration for browser testing
-
-**Returns:**
-
-- `fetchFn` - Function to trigger the request
-- `state.loading` - Boolean indicating if request is in progress
-- `state.error` - Error object if request failed
-
 **Example:**
 
 ```tsx
 import { useNuiCallback } from "fivem-nui-react";
 
-interface PlayerData {
-  name: string;
-  level: number;
-}
-
 function PlayerInfo() {
   const [player, setPlayer] = useState<PlayerData | null>(null);
 
   const [fetchPlayer, { loading, error }] = useNuiCallback<PlayerData>(
     "getPlayerData",
     (data) => setPlayer(data),
-    {
-      mockData: { name: "John", level: 10 },
-      mockDelay: 500,
-    },
+    { mockData: { name: "John", level: 10 }, mockDelay: 500 },
   );
 
   useEffect(() => {
@@ -173,41 +166,33 @@ function PlayerInfo() {
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
-  if (!player) return null;
 
-  return (
-    <div>
-      <p>Name: {player.name}</p>
-      <p>Level: {player.level}</p>
-    </div>
-  );
+  return <div>{player?.name}</div>;
 }
 ```
 
+**FiveM Client (Lua):**
+
+```lua
+RegisterNUICallback("getPlayerData", function(data, cb)
+  local playerId = data.id
+  cb({ name = "John", level = 10 })
+end)
+```
+
 ---
 
 ### useSendNui
 
-A hook for sending data to the Lua client without expecting a response.
+Hook for sending data to FiveM client without expecting a response.
 
 ```tsx
 useSendNui<D>(
   eventName: string,
-  options?: UseSendNuiOptions
-): [sendFn: (data?: D) => Promise<void>, state: { loading: boolean, error: Error | null }]
+  options?: { mockDelay?: number }
+): [(data?: D) => Promise<void>, { loading: boolean; error: Error | null }]
 ```
 
-**Parameters:**
-
-- `eventName` - The NUI callback event name
-- `options` - Optional mock delay configuration for browser testing
-
-**Returns:**
-
-- `sendFn` - Function to send data
-- `state.loading` - Boolean indicating if request is in progress
-- `state.error` - Error object if request failed
-
 **Example:**
 
 ```tsx
@@ -216,19 +201,18 @@ import { useSendNui } from "fivem-nui-react";
 function CloseButton() {
   const [closeUI, { loading }] = useSendNui<{ reason: string }>("closeUI");
 
-  const handleClose = () => {
-    closeUI({ reason: "user_clicked" });
-  };
-
   return (
-    <button onClick={handleClose} disabled={loading}>
-      {loading ? "Closing..." : "Close"}
+    <button
+      onClick={() => closeUI({ reason: "user_clicked" })}
+      disabled={loading}
+    >
+      Close
     </button>
   );
 }
 ```
 
-**Lua side:**
+**FiveM Client (Lua):**
 
 ```lua
 RegisterNUICallback("closeUI", function(data, cb)
@@ -243,80 +227,64 @@ end)
 
 Check if running in browser (outside FiveM).
 
-```tsx
-isEnvBrowser(): boolean
-```
-
-**Example:**
-
 ```tsx
 import { isEnvBrowser } from "fivem-nui-react";
 
 if (isEnvBrowser()) {
   console.log("Running in browser - debug mode");
-} else {
-  console.log("Running in FiveM");
 }
 ```
 
 ---
 
-## Browser Testing (Mock Data)
+## Browser Testing
 
-All hooks and functions support mock data for testing your UI in a regular browser without FiveM.
+All hooks support mock data for testing in browser without FiveM:
 
-When `isEnvBrowser()` returns `true`:
+| Option      | Description                                            | Default |
+| ----------- | ------------------------------------------------------ | ------- |
+| `mockData`  | Data to return in browser mode                         | -       |
+| `mockDelay` | Delay in ms before returning                           | 500     |
+| `signal`    | AbortSignal for request cancellation (`fetchNui` only) | -       |
 
-- `useNuiEvent` will trigger the handler with `mockData` after `mockDelay` milliseconds
-- `fetchNui` will return `mockData` after `mockDelay` milliseconds
-- `useNuiCallback` will call the callback with `mockData` after `mockDelay` milliseconds
-- `useSendNui` will simulate a delay with `mockDelay` milliseconds
+When `isEnvBrowser()` is `true`:
 
-**Options:**
-
-- `mockData` - The data to return in browser mode
-- `mockDelay` - Delay in milliseconds before returning data (default: 500ms)
+- `useNuiEvent` triggers handler with `mockData` after delay
+- `fetchNui` returns `mockData` after delay
+- `useNuiCallback` calls callback with `mockData` after delay
+- `useSendNui` simulates delay only
 
 ---
 
-## TypeScript Support
+## TypeScript
 
-All functions are fully typed with generics:
+All functions are fully typed:
 
 ```tsx
-// Define your types
-interface ShowUIData {
-  visible: boolean;
-  title: string;
+interface PlayerData {
+  name: string;
+  level: number;
 }
 
 interface PlayerRequest {
   id: number;
 }
 
-interface PlayerResponse {
-  name: string;
-  level: number;
-}
-
-// Use with type parameters
-useNuiEvent<ShowUIData>("showUI", (data) => {
-  // data is typed as ShowUIData
-  console.log(data.visible, data.title);
-});
-
-const player = await fetchNui<PlayerResponse, PlayerRequest>("getPlayer", {
+// Typed response
+const player = await fetchNui<PlayerData, PlayerRequest>("getPlayer", {
   id: 1,
 });
-// player is typed as PlayerResponse
 
-const [fetchPlayer, { loading }] = useNuiCallback<
-  PlayerResponse,
-  PlayerRequest
->("getPlayer", (data) => console.log(data.name));
+// Typed callback
+const [fetchPlayer, { loading }] = useNuiCallback<PlayerData, PlayerRequest>(
+  "getPlayer",
+  (data) => console.log(data.name),
+);
 ```
 
----
+## Note
+
+Most of the code in this project was written by AI and then manually reviewed and edited.
 
 ## License
 

package/dist/index.d.mts

@@ -10,6 +10,7 @@ interface UseNuiEventOptions<T = unknown> {
 interface FetchNuiOptions<T = unknown> {
     mockData?: T;
     mockDelay?: number;
+    signal?: AbortSignal;
 }
 /**
  * Checks if running in browser debug mode
@@ -30,7 +31,7 @@ declare function useNuiEvent<T = unknown>(action: string, handler: NuiEventHandl
  * Sends a request to NUI callback (fivem client)
  * @param eventName - The callback event name
  * @param data - Data to send
- * @param options - Options for mock data in browser mode
+ * @param options - Options for mock data and abort signal in browser mode
  * @returns Promise<T> - Response from fivem client
  * @example
  * const result = await fetchNui("getPlayerData", { id: 1 }, {

package/dist/index.d.ts

@@ -10,6 +10,7 @@ interface UseNuiEventOptions<T = unknown> {
 interface FetchNuiOptions<T = unknown> {
     mockData?: T;
     mockDelay?: number;
+    signal?: AbortSignal;
 }
 /**
  * Checks if running in browser debug mode
@@ -30,7 +31,7 @@ declare function useNuiEvent<T = unknown>(action: string, handler: NuiEventHandl
  * Sends a request to NUI callback (fivem client)
  * @param eventName - The callback event name
  * @param data - Data to send
- * @param options - Options for mock data in browser mode
+ * @param options - Options for mock data and abort signal in browser mode
  * @returns Promise<T> - Response from fivem client
  * @example
  * const result = await fetchNui("getPlayerData", { id: 1 }, {

package/dist/index.js

@@ -66,9 +66,21 @@ async function fetchNui(eventName, data, options) {
     headers: {
       "Content-Type": "application/json; charset=UTF-8"
     },
-    body: JSON.stringify(data ?? {})
+    body: JSON.stringify(data ?? {}),
+    signal: options == null ? void 0 : options.signal
   });
-  return response.json();
+  if (!response.ok) {
+    throw new Error(`NUI request failed: ${eventName} (${response.status})`);
+  }
+  const text = await response.text();
+  if (!text || text.length === 0) {
+    return null;
+  }
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
 }
 function useNuiCallback(eventName, callback, options) {
   const [state, setState] = (0, import_react.useState)({
@@ -76,20 +88,46 @@ function useNuiCallback(eventName, callback, options) {
     error: null
   });
   const callbackRef = (0, import_react.useRef)(callback);
+  const mountedRef = (0, import_react.useRef)(true);
+  const abortControllerRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     callbackRef.current = callback;
   }, [callback]);
+  (0, import_react.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      var _a;
+      mountedRef.current = false;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const fetch2 = (0, import_react.useCallback)(
     async (data) => {
-      setState({ loading: true, error: null });
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      if (mountedRef.current) {
+        setState({ loading: true, error: null });
+      }
       try {
-        const result = await fetchNui(eventName, data, options);
-        callbackRef.current(result);
-        setState({ loading: false, error: null });
+        const result = await fetchNui(eventName, data, {
+          ...options,
+          signal: controller.signal
+        });
+        if (!controller.signal.aborted && mountedRef.current) {
+          callbackRef.current(result);
+          setState({ loading: false, error: null });
+        }
         return result;
       } catch (err) {
+        if (controller.signal.aborted) {
+          throw err;
+        }
         const error = err instanceof Error ? err : new Error(String(err));
-        setState({ loading: false, error });
+        if (mountedRef.current) {
+          setState({ loading: false, error });
+        }
         throw error;
       }
     },
@@ -102,9 +140,25 @@ function useSendNui(eventName, options) {
     loading: false,
     error: null
   });
+  const mountedRef = (0, import_react.useRef)(true);
+  const abortControllerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      var _a;
+      mountedRef.current = false;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const send = (0, import_react.useCallback)(
     async (data) => {
-      setState({ loading: true, error: null });
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      if (mountedRef.current) {
+        setState({ loading: true, error: null });
+      }
       try {
         if (isEnvBrowser()) {
           const delay = (options == null ? void 0 : options.mockDelay) ?? 500;
@@ -115,13 +169,19 @@ function useSendNui(eventName, options) {
             headers: {
               "Content-Type": "application/json; charset=UTF-8"
             },
-            body: JSON.stringify(data ?? {})
+            body: JSON.stringify(data ?? {}),
+            signal: controller.signal
           });
         }
-        setState({ loading: false, error: null });
+        if (!controller.signal.aborted && mountedRef.current) {
+          setState({ loading: false, error: null });
+        }
       } catch (err) {
+        if (controller.signal.aborted) return;
         const error = err instanceof Error ? err : new Error(String(err));
-        setState({ loading: false, error });
+        if (mountedRef.current) {
+          setState({ loading: false, error });
+        }
         throw error;
       }
     },

package/dist/index.mjs

@@ -39,9 +39,21 @@ async function fetchNui(eventName, data, options) {
     headers: {
       "Content-Type": "application/json; charset=UTF-8"
     },
-    body: JSON.stringify(data ?? {})
+    body: JSON.stringify(data ?? {}),
+    signal: options == null ? void 0 : options.signal
   });
-  return response.json();
+  if (!response.ok) {
+    throw new Error(`NUI request failed: ${eventName} (${response.status})`);
+  }
+  const text = await response.text();
+  if (!text || text.length === 0) {
+    return null;
+  }
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
 }
 function useNuiCallback(eventName, callback, options) {
   const [state, setState] = useState({
@@ -49,20 +61,46 @@ function useNuiCallback(eventName, callback, options) {
     error: null
   });
   const callbackRef = useRef(callback);
+  const mountedRef = useRef(true);
+  const abortControllerRef = useRef(null);
   useEffect(() => {
     callbackRef.current = callback;
   }, [callback]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      var _a;
+      mountedRef.current = false;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const fetch2 = useCallback(
     async (data) => {
-      setState({ loading: true, error: null });
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      if (mountedRef.current) {
+        setState({ loading: true, error: null });
+      }
       try {
-        const result = await fetchNui(eventName, data, options);
-        callbackRef.current(result);
-        setState({ loading: false, error: null });
+        const result = await fetchNui(eventName, data, {
+          ...options,
+          signal: controller.signal
+        });
+        if (!controller.signal.aborted && mountedRef.current) {
+          callbackRef.current(result);
+          setState({ loading: false, error: null });
+        }
         return result;
       } catch (err) {
+        if (controller.signal.aborted) {
+          throw err;
+        }
         const error = err instanceof Error ? err : new Error(String(err));
-        setState({ loading: false, error });
+        if (mountedRef.current) {
+          setState({ loading: false, error });
+        }
         throw error;
       }
     },
@@ -75,9 +113,25 @@ function useSendNui(eventName, options) {
     loading: false,
     error: null
   });
+  const mountedRef = useRef(true);
+  const abortControllerRef = useRef(null);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      var _a;
+      mountedRef.current = false;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const send = useCallback(
     async (data) => {
-      setState({ loading: true, error: null });
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      if (mountedRef.current) {
+        setState({ loading: true, error: null });
+      }
       try {
         if (isEnvBrowser()) {
           const delay = (options == null ? void 0 : options.mockDelay) ?? 500;
@@ -88,13 +142,19 @@ function useSendNui(eventName, options) {
             headers: {
               "Content-Type": "application/json; charset=UTF-8"
             },
-            body: JSON.stringify(data ?? {})
+            body: JSON.stringify(data ?? {}),
+            signal: controller.signal
           });
         }
-        setState({ loading: false, error: null });
+        if (!controller.signal.aborted && mountedRef.current) {
+          setState({ loading: false, error: null });
+        }
       } catch (err) {
+        if (controller.signal.aborted) return;
         const error = err instanceof Error ? err : new Error(String(err));
-        setState({ loading: false, error });
+        if (mountedRef.current) {
+          setState({ loading: false, error });
+        }
         throw error;
       }
     },

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "fivem-nui-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React hooks and utilities for FiveM NUI development",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TGIANN/fivem-nui-react.git"
+  },
+  "homepage": "https://github.com/TGIANN/fivem-nui-react#readme",
+  "bugs": {
+    "url": "https://github.com/TGIANN/fivem-nui-react/issues"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -26,7 +34,7 @@
     "hooks",
     "cfx"
   ],
-  "author": "",
+  "author": "TGIANN (tgiann.com)",
   "license": "MIT",
   "type": "commonjs",
   "peerDependencies": {