fivem-nui-react 1.0.0 → 1.1.0

package/README.md

@@ -12,7 +12,8 @@ npm install fivem-nui-react
 
 - **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
+- **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
 
@@ -185,6 +186,59 @@ function PlayerInfo() {
 
 ---
 
+### useSendNui
+
+A hook for sending data to the Lua client without expecting a response.
+
+```tsx
+useSendNui<D>(
+  eventName: string,
+  options?: UseSendNuiOptions
+): [sendFn: (data?: D) => Promise<void>, state: { 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
+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>
+  );
+}
+```
+
+**Lua side:**
+
+```lua
+RegisterNUICallback("closeUI", function(data, cb)
+  SetNuiFocus(false, false)
+  cb("ok")
+end)
+```
+
+---
+
 ### isEnvBrowser
 
 Check if running in browser (outside FiveM).
@@ -216,6 +270,7 @@ When `isEnvBrowser()` returns `true`:
 - `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
 
 **Options:**
 

package/dist/index.d.mts

@@ -70,5 +70,26 @@ type UseNuiCallbackReturn<T, D> = [
  * }, [fetchPlayer]);
  */
 declare function useNuiCallback<T = unknown, D = unknown>(eventName: string, callback: (data: T) => void, options?: UseNuiCallbackOptions<T>): UseNuiCallbackReturn<T, D>;
+interface UseSendNuiOptions {
+    mockDelay?: number;
+}
+interface UseSendNuiState {
+    loading: boolean;
+    error: Error | null;
+}
+type UseSendNuiReturn<D> = [(data?: D) => Promise<void>, UseSendNuiState];
+/**
+ * React hook for sending data to NUI callback without expecting a response
+ * @param eventName - The callback event name
+ * @param options - Options for mock delay in browser mode
+ * @returns [sendFunction, { loading, error }]
+ * @example
+ * const [closeUI, { loading }] = useSendNui("closeUI");
+ *
+ * const handleClose = () => {
+ *   closeUI({ reason: "user_clicked" });
+ * };
+ */
+declare function useSendNui<D = unknown>(eventName: string, options?: UseSendNuiOptions): UseSendNuiReturn<D>;
 
-export { type FetchNuiOptions, type NuiEventHandler, type NuiMessageEvent, type UseNuiCallbackOptions, type UseNuiCallbackReturn, type UseNuiCallbackState, type UseNuiEventOptions, fetchNui, isEnvBrowser, useNuiCallback, useNuiEvent };
+export { type FetchNuiOptions, type NuiEventHandler, type NuiMessageEvent, type UseNuiCallbackOptions, type UseNuiCallbackReturn, type UseNuiCallbackState, type UseNuiEventOptions, type UseSendNuiOptions, type UseSendNuiReturn, type UseSendNuiState, fetchNui, isEnvBrowser, useNuiCallback, useNuiEvent, useSendNui };

package/dist/index.d.ts

@@ -70,5 +70,26 @@ type UseNuiCallbackReturn<T, D> = [
  * }, [fetchPlayer]);
  */
 declare function useNuiCallback<T = unknown, D = unknown>(eventName: string, callback: (data: T) => void, options?: UseNuiCallbackOptions<T>): UseNuiCallbackReturn<T, D>;
+interface UseSendNuiOptions {
+    mockDelay?: number;
+}
+interface UseSendNuiState {
+    loading: boolean;
+    error: Error | null;
+}
+type UseSendNuiReturn<D> = [(data?: D) => Promise<void>, UseSendNuiState];
+/**
+ * React hook for sending data to NUI callback without expecting a response
+ * @param eventName - The callback event name
+ * @param options - Options for mock delay in browser mode
+ * @returns [sendFunction, { loading, error }]
+ * @example
+ * const [closeUI, { loading }] = useSendNui("closeUI");
+ *
+ * const handleClose = () => {
+ *   closeUI({ reason: "user_clicked" });
+ * };
+ */
+declare function useSendNui<D = unknown>(eventName: string, options?: UseSendNuiOptions): UseSendNuiReturn<D>;
 
-export { type FetchNuiOptions, type NuiEventHandler, type NuiMessageEvent, type UseNuiCallbackOptions, type UseNuiCallbackReturn, type UseNuiCallbackState, type UseNuiEventOptions, fetchNui, isEnvBrowser, useNuiCallback, useNuiEvent };
+export { type FetchNuiOptions, type NuiEventHandler, type NuiMessageEvent, type UseNuiCallbackOptions, type UseNuiCallbackReturn, type UseNuiCallbackState, type UseNuiEventOptions, type UseSendNuiOptions, type UseSendNuiReturn, type UseSendNuiState, fetchNui, isEnvBrowser, useNuiCallback, useNuiEvent, useSendNui };

package/dist/index.js

@@ -22,7 +22,8 @@ __export(index_exports, {
   fetchNui: () => fetchNui,
   isEnvBrowser: () => isEnvBrowser,
   useNuiCallback: () => useNuiCallback,
-  useNuiEvent: () => useNuiEvent
+  useNuiEvent: () => useNuiEvent,
+  useSendNui: () => useSendNui
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
@@ -96,10 +97,43 @@ function useNuiCallback(eventName, callback, options) {
   );
   return [fetch2, state];
 }
+function useSendNui(eventName, options) {
+  const [state, setState] = (0, import_react.useState)({
+    loading: false,
+    error: null
+  });
+  const send = (0, import_react.useCallback)(
+    async (data) => {
+      setState({ loading: true, error: null });
+      try {
+        if (isEnvBrowser()) {
+          const delay = (options == null ? void 0 : options.mockDelay) ?? 500;
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        } else {
+          await fetch(`https://${resourceName}/${eventName}`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8"
+            },
+            body: JSON.stringify(data ?? {})
+          });
+        }
+        setState({ loading: false, error: null });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({ loading: false, error });
+        throw error;
+      }
+    },
+    [eventName, options]
+  );
+  return [send, state];
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   fetchNui,
   isEnvBrowser,
   useNuiCallback,
-  useNuiEvent
+  useNuiEvent,
+  useSendNui
 });

package/dist/index.mjs

@@ -70,9 +70,42 @@ function useNuiCallback(eventName, callback, options) {
   );
   return [fetch2, state];
 }
+function useSendNui(eventName, options) {
+  const [state, setState] = useState({
+    loading: false,
+    error: null
+  });
+  const send = useCallback(
+    async (data) => {
+      setState({ loading: true, error: null });
+      try {
+        if (isEnvBrowser()) {
+          const delay = (options == null ? void 0 : options.mockDelay) ?? 500;
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        } else {
+          await fetch(`https://${resourceName}/${eventName}`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8"
+            },
+            body: JSON.stringify(data ?? {})
+          });
+        }
+        setState({ loading: false, error: null });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({ loading: false, error });
+        throw error;
+      }
+    },
+    [eventName, options]
+  );
+  return [send, state];
+}
 export {
   fetchNui,
   isEnvBrowser,
   useNuiCallback,
-  useNuiEvent
+  useNuiEvent,
+  useSendNui
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fivem-nui-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React hooks and utilities for FiveM NUI development",
   "main": "dist/index.js",
   "module": "dist/index.mjs",