Picture of the authoredeverce

Notify

A simple & elegant notification system.

Installation

Download the Script

Download the script using keymaster.

Add it to your resources

Open the downloaded zip, copy ed_notify & put it inside your resources.

Start the Script

Terminal
refresh
start ed_notify

Finally, if everything is right, you can put it inside your server.cfg as follows:

server.cfg
ensure ed_notify
Well done! You can now enjoy your new script.
You are free to change the resource name.

If you change the resource name, all exports & events will be renamed to new resource name.

ESX Integration

If you want to change the default notification system to ed_notify, you'll need to replace ESX.ShowNotification function as follows:

es_extended/client/functions.lua
-- ...
function ESX.ShowNotification(message, notifyType, length)
    if GetResourceState("ed_notify") ~= "missing" then
        exports.ed_notify:push({
          title = message,
          type = notifyType,
          duration = length
        })
        return
    end

    print("[^1ERROR^7] ^5ed_notify^7 is Missing!")
end
-- ...

QBCore Integration

If you want to change the default notification system to ed_notify, you'll need to replace QBCore.Functions.Notify function as follows:

qb-core/client/functions.lua
-- ...
function QBCore.Functions.Notify(text, texttype, length)
    if GetResourceState("ed_notify") ~= "missing" then
        exports.ed_notify:push({
          title = text.text or text,
          type = texttype,
          description = text.caption,
          duration = length
        })
        return
    end

    print("[^1ERROR^7] ^5ed_notify^7 is Missing!")
end
-- ...

Don't forget to move your notify configuration from qb-core/config.lua to ed_notify/config.lua.

Configuration

-- https://edeverce.com/scripts/notify

Config = {
   ---@type "default"|"blue"|"green"|"red"|"rose"|"orange"|"violet"|"yellow"
   -- UI theme. See https://edeverce.com/guides/theming for more advanced configuration.
   theme = "default",

   ---@type string
   -- Command to open notify settings.
   settingsCommand = "notifysettings",

   ---@type number
   -- Default notification duration. Can be overwritten by setting duration when pushing a notification.
   defaultDuration = 5000,

   ---@type "top-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"
   -- Default position. Can be overwritten by user's preferences.
   defaultPosition = "top-right",

   ---@type number
   -- Default offset (px). Can be overwritten by user's preferences.
   defaultOffset = 25,

   -- See https://docs.fivem.net/docs/game-references/input-mapper-parameter-ids/keyboard/ for keys.

   ---@type string?
   -- Default focus key. Can be set to nil if you don't want to use this feature. Key can be changed by players via key bindings.
   defaultFocusKey = "K",

   ---@type string?
   -- Default expand key. Can be set to nil if you don't want to use this feature. Key can be changed by players via key bindings.
   defaultExpandKey = "J",

   ---@type table<string, { icon?: string, color?: string }>
   -- Icon is optional, must be a font awesome icon name. Color is optional, must be a HEX value.
   -- See https://fontawesome.com/icons for icon names.
   customTypes = {
      example = {
         icon = "fa fa-message",
         color = "#6644ff",
      },
   },
}
Translations = {
   focus_description = "Toggle Focus",
   expand_description = "Toggle Expand",

   settings = "Notification Settings",
   settings_description = "Change notification settings.",

   settings_theme = "Theme",
   settings_theme_description = "Toggle light mode & rich colors.",
   settings_theme_toggle_light_mode = "Toggle Light Mode",
   settings_theme_toggle_rich_colors = "Toggle Rich Colors",

   settings_position = "Position",
   settings_position_description = "Side & alignment of notifications.",
   settings_position_top_left = "top-left",
   settings_position_top_center = "top-center",
   settings_position_top_right = "top-right",
   settings_position_bottom_left = "bottom-left",
   settings_position_bottom_center = "bottom-center",
   settings_position_bottom_right = "bottom-right",

   settings_offset = "Offset",
   settings_offset_description = "Offset of notifications from the edges of screen.",

   settings_volume = "Volume",
   settings_volume_description = "Volume of notification sound.",
}

Make sure to restart the script after changing one of these files.

API

Push

Pushing a notification:

-- Using exports:
exports.ed_notify:push(options)

-- Using event:
TriggerEvent("ed_notify:push", options)
-- Using exports:
exports.ed_notify:push(source, options)

-- Using event:
TriggerClientEvent("ed_notify:push", source, options)
PropTypeDefault
title
string
-
id?
string
-
type?
'info' | 'success' | 'error' | 'warning' | 'loading' | customType
-
description?
string
-
duration?
number
Config.defaultDuration

Update

Updating a notification:

-- Using exports:
exports.ed_notify:update(options)

-- Using event:
TriggerEvent("ed_notify:update", options)
-- Using exports:
exports.ed_notify:update(source, options)

-- Using event:
TriggerClientEvent("ed_notify:update", source, options)
PropTypeDefault
title
string
-
id
string
-
type?
'info' | 'success' | 'error' | 'warning' | 'loading' | customType
-
description?
string
-
duration?
number
-

Dismiss

Dismissing a notification:

-- Using exports:
exports.ed_notify:dismiss(id)

-- Using event:
TriggerEvent("ed_notify:dismiss", id)
-- Using exports:
exports.ed_notify:dismiss(source, id)

-- Using event:
TriggerClientEvent("ed_notify:dismiss", source, id)
PropTypeDefault
id?
string
-

Usage

Push

exports.ed_notify:push({
  title = "Notification Title",
  id = "unique-id",
  type = "success",
  description = "Notification Description",
  duration = 5000
})

Update

exports.ed_notify:update({
  title = "Updated Notification Title",
  id = "unique-id",
  type = "error",
  description = "Updated Notification Description",
  duration = 2500
})

Dismiss

exports.ed_notify:dismiss("unique-id")