> 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-visible.md).

# useVisible

## Overview

The `useVisible` hook manages the visibility state of a UI component in a FiveM NUI environment. It listens for visibility updates via an NUI message and allows closing the UI programmatically.

## Usage

### Importing the Hook

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

### Parameters

<table><thead><tr><th width="137">Parameter</th><th width="298">Type</th><th width="116">Default</th><th>Description</th><th data-type="checkbox">Optional</th></tr></thead><tbody><tr><td><strong><code>elementId</code></strong></td><td><code>string</code></td><td>N/A</td><td>A unique identifier for the UI component.</td><td>false</td></tr><tr><td><strong><code>initialValue</code></strong></td><td><code>boolean | "DISPLAY_ON_DEVELOPMENT"</code></td><td><code>true</code></td><td>Determines the initial visibility state.</td><td>true</td></tr></tbody></table>

### Return Value

The hook returns an object containing:

| Property        | Type       | Description                                     |
| --------------- | ---------- | ----------------------------------------------- |
| **`visible`**   | `boolean`  | Indicates if the UI component is visible.       |
| **`close`**     | `function` | A function to close the UI component.           |
| **`isClosing`** | `boolean`  | Indicates if the closing action is in progress. |

## Example

### ReactJS

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

export const MyComponent = () => {
    const { visible, close, isClosing } = useVisible("my-ui", "DISPLAY_ON_DEVELOPMENT");

    if (!visible) return null;

    return (
        <div className="nui-container">
            <h1>My NUI Component</h1>
            <button onClick={close} disabled={isClosing}>
                {isClosing ? "Closing..." : "Close"}
            </button>
        </div>
    );
};
```

### LUA

```lua
RegisterCommand("open_ui", function()
    SendNUIMessage({
        eventName = "nui:visible:update",
        elementId = "my-ui",
        visible = true
    })
end, false)

RegisterCommand("close_ui", function()
    SendNUIMessage({
        eventName = "nui:visible:update",
        elementId = "my-ui",
        visible = false
    })
end, false)

RegisterNUICallback("nui:visible:close", function(data, cb)
    if data.elementId == "my-ui" then
        print("Closing UI with key: 'my-ui'")
        cb(true)
    else
        cb(false)
    end
end)
```

## Notes

* If `initialValue` is set to `"DISPLAY_ON_DEVELOPMENT"`, the UI will only be visible in a development environment.
* Ensure proper communication between Lua and React NUI by using `SendNUIMessage` in Lua and `useNuiMessage` in React.

## Conclusion

The `useVisible` hook simplifies managing the visibility of NUI components in FiveM projects. It provides an efficient way to control UI state and seamlessly integrates with NUI messages.