1

rr_uilib
rr_uilib1090×510 40.3 KB

RR UILib - The UI framework for your fivem server

Hello everyone, this is my third release on this platform. I recently uploaded another notify script I made. But that one wasn’t really that customizable. And because I was learning react and typescript I thought I would recreate it with react and typescript. (Dont worry if you don’t know that, the script is plug and play).
But yeah the source code might not be the best since my experience in react is limited. But once I learn more I will refactor some of the code to improve it.

For now the resource has 2 main functions.

Notify

Notifiy is a component that handles the sending of notifications (duh).
There are several options you can change like: style, type, icon, position, msg, duration
This is all explained in the readme of the github repo.

notify_style_1 notify_style_2 notify_style_3

DrawText

I added this component to get rid of the games way of handling drawtext. Because you have to run that every ms to prevent flickering. And here it is just a toggle. You send the event or use the export to draw it with the functions. And you send it again with draw to false (explained in github) to toggle it off.

drawtext_1 drawtext_2 drawtext_3

Download

Plug and play: 1.2.0 Download
Source: Source Download

I hope you guys like it, please let me know. And if you have any questions, please ask.

19 Likes
2

Amazing!

1 Like
3

Thanks :blush:

4

Great work, it looks really cool :slight_smile:

1 Like
5

Thank you, appreciate it

6

I like them a lot but I don’t know how to install this… any tutorial

1 Like
7

You either click on the plug and play and download that. Or you go to the github link. And on the right side is releases. And pick the newest version.

You download that amd that gives you a zip file with the newest release. You have to extract the zip file. And the folder that you get is the one you put in your resources folder. You start it like any other resource.

And to use it for instance.
Instead of doing

ESX.ShowNotification() if that is what you are using.
You do
exports.rr_uilib:Notify()

But you have to send a obiect with it. I will update the readme or make a youtube video explaining it soon. For now you can look at the readme it does tell you what you need to send with the notify function.

// Example
exports.rr_uilib:Notify({
msg = "my message",
type = "error",
style = "dark",
icon = "fa-solid fa-check"
})
8

Thank you very much for the explanation if I can make it work

1 Like
9

testt

10

What do you mean?

1 Like
11

I never like border-radius, but these notification somehow fit.

1 Like
12

Haha thanks, if you want I can look at adding a functionality so you can also have them without border-radius?

13

It’s up to you, but more “versions” would be better :smiling_face:

1 Like
14

Yes totally agree, my goal with this resource is to eventually create a one stop solution for ui stuff for any server who needs it. So the more customizable it is the better. Do you have any other suggestions in terms of settings or styling that you would like to see added?

15

At the moment I can’t think of anything …

16

love it

1 Like
17

Were you able to make it work

1 Like
18

Hello, how can i make this work in server-side . Don’t know how to trigger this.

19

The github page’s readme shows how to trigger it client and server-sided.

1 Like
20

Thanks, i will see.