# Client Exports

### Notification

{% code fullWidth="false" %}

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear", "rounded", "rounded-icon". (Optional)
---  @field preset {string?} Name of the predefined preset from Config.NotificationsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
exports['vms_notifyv2']:Notification(data)
```

{% endcode %}

{% hint style="info" %}
Parameter `soundNative` requires 4 data because it runs on a native FiveM base [`PlaySoundFrontend`](https://docs.fivem.net/natives/?_0x67C540AA08E4A6F5) you can use [**dev\_nativesounds**](https://github.com/PainedPsyche/dev_nativesounds) created by [PainedPsyche](https://github.com/PainedPsyche/dev_nativesounds/commits?author=PainedPsyche) to search for sounds.

Class `customCSS` works on the basis of default data from the CSS language.
{% endhint %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:Notification({
    title = "example",
    description = "example",
    time = 4000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    preset = "ios",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        icon = {
            ['color'] = 'white',
            ['scale'] = '1.15'
        },
        title = {},
        description = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "{CURRENT_COLOR}",
            ['border'] = 'none'
        },
        background_glow = {},
    },
})
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
exports['vms_notifyv2']:Notification({
    title = "SHOP",
    description = "You just bought bread.",
    time = 4000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})
```

</details>

***

### TopNotification

{% code fullWidth="false" %}

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field time {number?} Display time in milliseconds. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field progressBar {string?} Progress bar type: "linear" or nil. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
exports['vms_notifyv2']:TopNotification(data)
```

{% endcode %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:TopNotification({
    title = "example",
    description = "example",
    time = 20000, -- Miliseconds
    color = "#34ebe8", -- Hex color
    icon = "fa-solid fa-check", -- Font Awesome (https://fontawesome.com/search)
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    progressBar = "linear",
    soundFile = "notification-1.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
})
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
exports['vms_notifyv2']:TopNotification({
    title = "ANNOUNCEMENT",
    description = "In ~y~30 minutes~s~ the event race will begin.",
    time = 15000,
    color = "#34ebe8",
    icon = "fa-solid fa-check",
})
```

</details>

***

### Question

```lua
--- @param data {table}
---  @field title {string?} Title. (Optional)
---  @field description {string?} Description. (Optional)
---  @field color {string?} Notification color in HEX format, such as "#34ebe8". (Optional)
---  @field icon {string?} An icon class from Font Awesome, such as “fa-solid fa-check”. (Optional)
---  @field image {string?} URL of the image displayed. (Optional)
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.icon {table} Icon styling, such as color or scaling.
---    @field customCSS.title {table} Title styling, such as font or size.
---    @field customCSS.description {table} Stylization of the description, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
---    @field customCSS.background_glow {table} Styling the background glow effect.
--- @param keys {table?}
local question = exports['vms_notifyv2']:Question(data, keys)
```

{% hint style="info" %}
You don't need to enter the `keys` parameter - if it is not available, the default keys from `Config.DefaultQuestionKeys` will be activated, i.e. Y for accept, N for reject.
{% endhint %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
local question = exports['vms_notifyv2']:Question({
    title = "example",
    description = "example",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
    image = "https://i.ibb.co/YdXQKY8/500x500.png",
    preset = "transparent",
    soundFile = "notification_3.mp3",
    soundVolume = 50,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0},
    customCSS = {
        icon = {
            ['scale'] = "1.08",
        },
        title = {
            ['text-shadow'] = "none",
        },
        description = {
            ['text-shadow'] = "none",
        },
        background = {},
        background_glow = {},
    },
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end
```

</details>

<details>

<summary>A simple example of use</summary>

```lua
local question = exports['vms_notifyv2']:Question({
    title = "Enter to house",
    description = "Do you want to enter the house?",
    color = "#673feb",
    icon = "fa-solid fa-circle-question",
}, {
    {
        displayKey = "Y",
        description = "Accept",
        control = 246
    },
    {
        displayKey = "N",
        description = "Reject",
        control = 306
    },
    {
        displayKey = "X",
        description = "I don't know",
        control = 73
    }
})

Citizen.Await(question) -- IT MUST BE HERE

if question == "246" then -- export returns clicked control as string!
    print('PLAYER ACCEPTED')
elseif question == "73" then
    print('THE PLAYER DOES NOT KNOW.')
else
    print('PLAYER REJECTED')
end
```

</details>

***

### ShowTextUI

{% code fullWidth="false" %}

```lua
--- @param message {string} Message
--- @param data {table?}
---  @field preset {string?} Name of the predefined preset from Config.QuestionsPresets. (Optional)
---  @field soundFile {string?} The name of the audio file, such as "notification-1.mp3". (Optional)
---  @field soundVolume {number?} Sound volume (range: 0-100). (Optional)
---  @field soundNative {table?} An array of native sound data that takes priority over soundFile. (Optional)
---  @field customCSS {table?} CSS style board for custom notification design. (Optional)
---    @field customCSS.key {table} Key styling, such as font or size.
---    @field customCSS.message {table} Stylization of the message, such as font thickness.
---    @field customCSS.background {table} Background styling, such as color and border.
exports['vms_notifyv2']:ShowTextUI(message, data)
```

{% endcode %}

<details>

<summary>Explanation</summary>

#### The use of parameters

```lua
exports['vms_notifyv2']:ShowTextUI("message", {
    soundFile = "notification-5.mp3",
    soundVolume = 30,
    soundNative = {-1, 'Checkpoint_Hit', 'GTAO_FM_Events_Soundset', 0}, -- This parameter has priority over soundFile
    customCSS = {
        key = {
            ['font-weight'] = '500'
        },
        message = {
            ['font-weight'] = '500'
        },
        background = {
            ['background'] = "red",
            ['border'] = 'none'
        }
    },
})
```

</details>

<details>

<summary>Example of use in your scripts</summary>

```lua
Citizen.CreateThread(function()
    local inRange = false
    local shown = false
    local letSleep = true
    while true do
        letSleep = true
        inRange = false
        local myCoords = GetEntityCoords(PlayerPedId())
        local coords = vector3(0.0, 0.0, 0.0)
        local distance = #(myCoords - coords)
        if distance <= 10.0 then
            letSleep = false
            if distance <= 2.5 then
                inRange = "Press ~INPUT_CONTEXT~ to enter"
                if IsControlJustPressed(0, 38) then
                    -- your action
                end
            end
        end
        if inRange and not shown then
            shown = true
            exports['vms_notifyv2']:ShowTextUI(inRange)
        elseif not inRange and shown then
            shown = false
            CL.TextUI.Close()
        end
        Citizen.Wait(letSleep and 1000 or 1)
    end
end)
```

</details>

***

### UpdateTextUI

```lua
--- @param message {string} Message
exports['vms_notifyv2']:UpdateTextUI(message)
```

***

### HideTextUI

```lua
exports['vms_notifyv2']:HideTextUI()
```