> For the complete documentation index, see [llms.txt](https://fivem-react.gitbook.io/fivem-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fivem-react.gitbook.io/fivem-react/hooks/use-nui-message.md).

# useNuiMessage

## Overview

The `useNuiMessage` hook listens for messages sent from the FiveM client-side Lua to the NUI (React) interface. It allows React components to respond to incoming NUI messages.

## Usage

### Importing the Hook

```tsx
import { useNuiMessage } from "@yankes/fivem-react/hooks";
```

### Parameters

<table><thead><tr><th width="249">Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>eventName</code></strong></td><td><code>string</code></td><td>The event name to lister for.</td></tr><tr><td><strong><code>callback</code></strong></td><td><code>(data?: T) ⇒ void</code></td><td>A function that is called when the message is received/</td></tr></tbody></table>

### Return Value

This hook does not return a value but automatically sets up an event listener for NUI messages.

## Example

### ReactJS

```tsx
import { useState } from "react";
import { useNuiMessage } from "@yankes/fivem-react/hooks";

type ExampleData = {
    eventName: string;
    message: string;
};

export const MyComponent = () => {
    const [message, setMessage] = useState("");

    useNuiMessage<ExampleData>("nui:example:event", (data: ExampleData) => {
        if (data) {
            setMessage(data.message);
        }
    });

    return (
        <div className="nui-container">
            <h1>NUI Message Listener</h1>
            <p>Received Message: {message}</p>
        </div>
    );
};
```

### LUA

```lua
RegisterCommand("send_nui_message", function()
    SendNUIMessage({
        eventName = "nui:example:event",
        message = "Hello from Lua!"
    })
end, false)
```

### How It Works

1. The React component calls `useNuiMessage` with an event name (`nui:example:event`) and a callback function.
2. When the FiveM client executes the `SendNUIMessage` function in Lua, the NUI (React) interface receives the event.
3. The `useNuiMessage` hook captures the event and executes the callback, updating the React state with the new message.

## Notes

* Ensure that the event name used in `SendNUIMessage` matches the one in `useNuiMessage`.
* The hook properly cleans up the event listener when the component unmounts to prevent memory leaks.

## Conclusion

The `useNuiMessage` hook is essential for handling NUI communication in FiveM React projects. It simplifies listening to and processing messages from Lua, making UI interaction seamless.