🗃️Exports & Commands

Find every detail of the modern FiveM hud where you will be able to apply code completely programmed by us in a fast and accessible way through simple exports and commands that we have created.

They work exactly the same for both frameworks. Everything only on the client side.

1. Toggle HUD

Also with /toghud command in chat.

exports["jgs-hud"]:showHUD()
exports["jgs-hud"]:hideHUD()

2. Seatbelt

Available through the seatbelt command or in the key (default) “B”.

3. Notifications

exports["jgs-hud"]:AddNotify(text, type, title, icon, boxColor, titleColor)
TriggerEvent('jgs:notification', text, type, title, icon, boxColor, titleColor)

4. Progressbar

Type: 'bar' | 'circle' Timeouts: in milliseconds Cb: Function to be executed

exports["jgs-hud"]:addProgress(type, text, timeouts, cb)

5. Text UI

exports["jgs-hud"]:CreateHelp(key, text)
exports["jgs-hud"]:ShowHelp(key, text)
exports["jgs-hud"]:RemoveHelp(id)

---

Example of Usage

client.lua

--@Notifications Events
TriggerEvent('jgs:notification', 'Testing command')
TriggerEvent('jgs:notification', 'Searching keys', 'info')

---@Example Thread
CreateThread(function()
    while(true)do
        local w = 1000
        local playerCoords = GetEntityCoords(PlayerPedId())
        local coords = vec3(255,100,100)
        local distance = #(playerCoords - coords)

        if (distance < 5) then
            --[[
                ---@param text string
                ---@param key string
                ESX.ShowHelpNotification(
                    text,
                    key
                )
            ]]
            --[[
                ---@param key string
                ---@param text string
                exports['jgs-hud']:ShowHelp(
                    key,
                    text
                )
            ]]
            -- ESX.ShowHelpNotification('Hello World', 'E')
            -- exports['jgs-hud']:ShowHelp('E', 'Hello World')
            w = 0
        end

        Wait(w)
    end
end)

---@Example Command
RegisterCommand('testNotify',
    function(playerId, args)
        --[[
            ---@param message string
            ---@param type string 'error' | 'success' | 'info' | ...Config.Notify.Types
            ---@param title? string 'Notification'
            ---@param icon? string 'fa-solid fa-exclamation-triangle'
            ---@param boxColor? string 'rgb(255, 255, 255)'
            ---@param titleColor? string 'rgb(0,0,0)'
            ESX.ShowNotification(
                messsage,
                type,
                title,
                icon,
                boxColor,
                titleColor
            )
        ]]
        --[[
            ---@param message string
            ---@param type string 'error' | 'success' | 'info' | ...Config.Notify.Types
            ---@param title? string 'Notification'
            ---@param icon? string 'fa-solid fa-exclamation-triangle'
            ---@param boxColor? string 'rgb(255, 255, 255)'
            ---@param titleColor? string 'rgb(0,0,0)'
            exports['jgs-hud']:AddNotify(
                messsage,
                type,
                title,
                icon,
                boxColor,
                titleColor
            )
        ]]
        ESX.ShowNotification(
            'This is a testing notification',
            'info',
        )
        exports['jgs-hud']:AddNotify(
            'This is an other testing notification',
            'info',
        )
    end, false
)

--@Custom Notify Example #2
ESX.ShowNotification(
    'This is a test notification', 
    'your-custom-type-name', 
    'Hola', 
    'fa-thin fa-badge-check', 
    'rgba(40, 167, 69, 0.3)', 
    '#28a745'
)