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

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

Parameters

Parameter	Type	Default	Description	Optional
elementId	string	N/A	A unique identifier for the UI component.
initialValue	boolean | "DISPLAY_ON_DEVELOPMENT"	true	Determines the initial visibility state.

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

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

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.