How to use it

Lyre Text UI relies on exports to function. Here is the list of exports:

1. addTextUI : Allows add a Text UI.

2. removeTextUI : Allow you to remove a specific Text UI.

3. setStyleArgs : Provides interaction with certain styling features.

4. editTextUI : Allow edit an existing Text UI

There are several types of instructions that you can display on the text UI with the addTextUI export:

1. text: This represents simple text, which can be formatted with HTML code.

"Text" text ui example with the "heavy" theme

1. keyboard: This represents a key, followed by text.

"Keyboard" text ui example with the "heavy" theme

1. progress: This represents a progress bar.

"Progress" text ui example with the "heavy" theme

Correct export usage will be something like:

local textui -- Init the text ui variable

-- Usage of export to create a text ui
-- This export will create a text ui, show it, and return the text ui table
-- You will be able to get textui's values (e.g textui.type, textui.content.text, textui.identifier) 
textui = textui or exports.lyre_textui:addTextUI({
    type = "keyboard", -- Chose the text ui type (keyboard, text, progress)
    content = { -- The content variable depend of the type of the textui
        text = "Press to open menu",
        keyboard = "E",
    }
})

-- Usage of export to remove a specific text ui
-- This export will delete the text ui only if it is correctly executed
textui = exports.lyre_textui:removeTextUI(textui and textui.identifier)

-- Usage of export to set style arguments
-- This export is related with the theme you use, some themes have style arguments and it's with this export you can use it
exports.lyre_textui:setStyleArgs(textui and textui.identifier, { "pressed" })
-- The "pressed" style argument is made for "keyboard" textui and make the key have a different style when pressed
-- You can also remove all arguments by doing :
exports.lyre_textui:setStyleArgs(textui and textui.identifier, {})

-- Usage of export to edit a specific text ui
-- This export allow you to edit an existing textui, the usage is very similar to addTextUI
textui = exports.lyre_textui:editTextUI(textui and textui.identifier, {
    type = "keyboard", -- Chose <<<<the text ui type (keyboard, text, progress)
    content = { -- The content variable depend of the type of the textui
        text = "Hey the text has changed", -- Put the thing you want to edit
        keyboard = textui.content.keyboard, -- Use textui table to change nothing for a value
    }
})

Here is a simple example of usage:

Citizen.CreateThread(function()
	local coords = vector3(150.0, 150.0, 150.0)
	local textui
	while true do
		local interval = 1000
		local ped = PlayerPedId()
		local pedCoords = GetEntityCoords(ped)
		if #(pedCoords - coords) < 5 then
			interval = 1
			textui = textui or exports.lyre_textui:addTextUI({ type = "keyboard", content = { text = "Open the menu", keyboard = "E" } } )
			if IsControlJustPressed(0, 38) then
				exports.lyre_textui:setStyleArgs(textui and textui.identifier, { "pressed" }) -- Avalaible style arguments depend of the theme you choose
				Citizen.SetTimeout(200, function()
					setStyleArgs(textui and textui.identifier, {})
				end)
				exports.lyre_textui:editTextUI(textui and textui.identifier, { type = textui.type, content = { text = "Has been pressed", keyboard = textui.content.keyboard } })
			end
		else
			textui = exports.lyre_textui:removeTextUI(textui and textui.identifier)
		end
		Citizen.Wait(interval)
	end
end)