ReactTS using NextUI and TailwindCSS template 1.0.1

Template for ReactTS using NextUI and TailwindCSS

This project serves as a template for getting started with React on your RageMP server. It is using TypeScript, and comes with NextUI providing all necessary building blocks and TailwindCSS for additional styling. The idea is to have one UI project containing everything you need, with modals that can be toggled on demand. 

I was struggling with getting what I needed from Vue, and decided to scrap that idea and went forward with React. I hope this will save others some time if you should choose the same. After browsing the forum a bit and seeing some of the valuable examples already existing for user interfaces, they didn't quite get me where I needed. So this is my take using, a globally exposed function invokeEvent that can be used to show, hide and toggle modals. This allows for as many modals to be displayed at the same time as you would like. I do want to mention https://rage.mp/forums/topic/2571-guide-creating-ui-with-react/ for having the idea of an EventManager to get the bridge between RageMP and the React instance. Though it is meant for JavaScript it was helpful to get things rolling. 

Build 

Run npm run build and grab the dist folder and put it inside your server client packages. 

Client events

After instantiating your browser it will support three functions for toggling modals on demand. The template contains a login example, so invoking trigger('show', 'login'); will enable the login modal etc. More modals can easily be created by following the structure as seen in the code.

let browser = mp.browsers.new("http://package/gamemode/cef/index.html");

mp.events.add('ShowModal::Client', (modal) => {
    browser.execute(`invokeEvent('show', '${modal}');`);
});

mp.events.add('ToggleModal::Client', (modal) => {
    browser.execute(`invokeEvent('toggle', '${modal}');`);
});

mp.events.add('HideModal::Client', (modal) => {
    browser.execute(`invokeEvent('hide', '${modal}');`);
});

Check out my GTARoleplay gamemode where this resource is actively being used.
Read more about it here: https://github.com/Andreas1331/ragemp-roleplay-readme

GitHub repository link
https://github.com/Andreas1331/ragemp-roleplay-ui