React Hooks & API

We provide a set of custom hooks to interact with the phone's core functions.

useNuiEvent

Listens for events sent from the Lua client script.

LUA CLIENT

Core.SendNuiMessage("MyCustomEvent", { someData = "Hello" })

REACT

import { useNuiEvent } from '@/hooks/useNui';

const MyComponent = () => {
    useNuiEvent<{ someData: string }>('MyCustomEvent', (payload) => {
        console.log(payload.someData); // "Hello"
    });
}

useNuiCallback

Triggers a client-side NUI Callback and awaits a response.

LUA CLIENT

RegisterNUICallback("Core:MyCallback", function(data, cb)
    print("Received:", data)
    cb({ success = true })
end)

REACT

import { useNuiCallback } from '@/hooks/useNui';

const MyComponent = () => {
    const [triggerCallback] = useNuiCallback<string, { success: boolean }>('Core:MyCallback');
    
    useEffect(() => {
        triggerCallback("Data sent to client").then((response) => {
            if (response.success) {
                console.log("Callback successful");
            }
        });
    }, [triggerCallback]);
}

useSettings

Retrieves the current player settings (wallpaper, scale, zoom, etc.). You can check the settings structure at web\src\types\types.ts

REACT

const MyComponent = () => {
    const settings = useSettings();
    // Access settings properties here
}

useLanguage

Handles localization based on the user's selected language.

REACT

import { useLanguage } from '@/hooks/useLanguage';

const MyComponent = () => {
    const language = useLanguage();
    
    return <span>{language.getLang("MyTranslationKey")}</span>;
}

useNavigateWithApps

A wrapper around the router to ensure smooth transitions between apps.

REACT

import { useNavigateWithApps } from '@/hooks/useNavigateWithApps';

const MyComponent = () => {
    const navigate = useNavigateWithApps();
    
    const handleClick = () => {
        navigate('/internal-route');
    }
}