> For the complete documentation index, see [llms.txt](https://jgs.gitbook.io/jgsdev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jgs.gitbook.io/jgsdev/docs/hud/exports.md).

# 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.

{% hint style="info" %}
They work exactly the same for both frameworks. Everything only on the client side.
{% endhint %}

### 1. Toggle HUD

Also with /toghud command in chat.

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

### 2. Seatbelt

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

### 3. Notifications

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

### 4. Progressbar

{% hint style="info" %}
Type: 'bar' | 'circle'\
Timeouts: in milliseconds \
Cb: Function to be executed
{% endhint %}

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

### 5. Text UI

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

***

#### Example of Usage

{% code title="client.lua" %}

```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'
)
```

{% endcode %}