[FREE] [NUI] FiveM + ReactJS Simple Template

FiveM Resource Development & Modding Releases
, ,
1

License

img

FiveM + ReactJS Simple Template

A simple template to make FiveM Lua scripts with NUI created in ReactJS. Webpack is configured to make editing easier. Editing styles and assets doesn’t require building a Node project. Only changes in JS/JSX files require building.

Requirements

Usage

  1. Clone repository
git clone https://github.com/KPGTB/fivem-react-template.git

You can also download that template or create new repository from it.

  1. Open terminal in web/react and install node packages
npm i
  1. Change name, description, etc. in
    • fxmanifest.lua
    • web/react/package.json
    • web/react/src/index.html
  2. Edit your code like you want
  3. After changes in web/react you need to build react project
npm run build

NOTE:

  • Don’t use Webpack Serve. Always build project and check it in-game
  • You need to import every stylesheet into web/styles/main.css. Don’t import styles into React components!
@import url(PATH_TO_CSS_FILE);
  • All asset paths must depend on web/build/index.html file. Don’t import assets into React components!

Examples:

    • Image path: web/assets/image.png
    • Path to image in every component: ../assets/image.png
    • Image path: web/assets/inventory/icons/apple.png
    • Path to image in every component: ../assets/inventory/icons/apple.png

Project structure

  • client - Client-side Lua scripts
    • client.lua - Example of NUI toggling
    • react.lua - Lua utils of react-fivem connection
  • server - Server-side Lua scripts
  • web - NUI
    • assets - NUI assets like images
      • logo.png - Example asset
    • styles - NUI styles (CSS)
      • main.css - Main CSS file
      • app.css - Example App component style
    • build - Folder with builded node project
    • react - ReactJS front-end
      • src - Source of node project
        • components - Components of ReactJS
        • pages - Pages of ReactJS (Components that represents page)
        • utils - Some utils
          • FiveM.js - JS utils of react-fivem connection
        • App.jsx - File with basic ReactJS component + Small example

Utils

In this template, I added some utilities that help with the react-fivem connection.

Lua Utils (client-side)

  1. Sending messages to ReactJS
SendReactMessage(action, data)

action - Text with name of action (It will be used in js)

data - Data of message. It can be text, number, boolean, table etc.

Example:

SendReactMessage("hello", "world")

That function will send a message with the name hello and the data world to ReactJS. See JS Utils section to check the receiving message in JS

  1. Setting visibility of NUI
SetReactVisible(visible)

visible - true or false

  1. Toggling visibility of NUI
ToggleReactVisible()
  1. Checking if NUI is visible
IsReactVisible()

JS Utils

To change default visibility, go to web/react/src/App.jsx and change state value visible

  1. Handling messages from NUI
useNui(action, handler)

action - Name of action

handler - Function that will be executed after message from FiveM

Example:

useNui("hello", (data) => console.log(data))

That function will print into the console the data received from the message with the name hello. See Lua Utils (client-side) section to check sending messages from Lua. In that case, it should print world

  1. Sending data to Lua
callNui(action, data, handler)

action - Name of NUI callback

data - Data to send

handler - Function that will be invoked after callback

Example:

LUA

RegisterNUICallback("example", function(data,cb)
    print(data)
    cb("sth")
end)

JS

callNui('example', "test", (data) => console.log(data))

What function will do:

  1. FiveM will register callback with name example
  2. ReactJS will send test to FiveM’s callback with name example
  3. FiveM will print example into console and will send callback with text sth
  4. ReactJS will print into console response sth

Examples in code

In that template, I added some examples. Remove it when creating a new resource.

  • client/client.lua - lines 1-3
  • web/assets/logo.png
  • web/styles/app.css (don’t forget to also remove the import from web/styles/main.css)
  • web/react/App.jsx - lines 13-14

License

Apache 2.0

Download

https://github.com/KPGTB/fivem-react-template

4 Likes
2

Just curious, what would make players use yours over someone elses which is more compatabile and more up to date…

for example: GitHub - project-error/fivem-react-boilerplate-lua: Basic Lua & React (TypeScript) boilerplate for FiveM

Also your usecase of https://github.com/KPGTB/fivem-react-template/blob/main/web/react/src/App.jsx is a little out of date for todays standards of React for multiple reasons primarily due to states and passing props down.

3

Hello! I just needed something simple for me, so I made it and published it if someone else needed it too. Why my resource? Not everyone wants to use TypeScript. Also, the problem with most other resources like that is that they have a lot of useful files, code, and packages. I made something simple that is easy to use for developers and for people.

1 Like
4

That’s fair enough, appreciate the response!

5

Interesting, I personally just use Vite to create react-project and then I just have eventlistener for ‘message’ in the main.jsx and use SendNuiMessage on the client to control the rendering of the ui.

How does this simple template differ from the way how I work with NUI on fivem?

6

So, the main difference (probably, because I don’t know how do you have configured react) is that everyone can edit assets and styles without building project. I think that it is very helpful. In that resource I added also small utils… With it you dont need to add all headers, links etc to nui fetch. You can simply use one function to make it. You can also use useNui function, and you won’t need to add new event listeners for every message.