Fork of FiveM HUD Design was forked from FiveM HUD Design
Continue chatting to ask questions about or make changes to it.
make this work with fivem, i use QBX
To make this HUD work with FiveM and QBX, you'll need to adapt the React component to communicate with the FiveM client-side scripts (Lua) using NUI (Native UI) events.
Here's how we'll modify the project:
useNuiEvent
hook: This hook will listen for messages sent from the FiveM client to the NUI (your React app).hud.tsx
: We'll remove the simulated data updates and instead use the useNuiEvent
hook to receive real-time data from FiveM.fxmanifest.lua
, client.lua
, and a basic index.html
that would serve as the entry point for your NUI in FiveM.resources
directory, create a new folder, e.g., myhud
.Place the files:
fxmanifest.lua
and client.lua
files into the myhud
folder.myhud
, create a subfolder named html
.public/index.html
file inside the html
folder.For the React app: You would typically build your React project (using npm run build
or yarn build
if it were a standard React app) and then copy the generated build
folder (containing static/css
and static/js
) into your myhud/html
directory. The index.html
would then correctly reference these compiled assets.
hud.tsx
and hooks/useNuiEvent.ts
files are part of the React source. They need to be compiled into static assets (HTML, CSS, JS) for FiveM to use them. The Next.js
environment here is for previewing the React code, not for generating a FiveM-ready build directly.ensure myhud
to your server.cfg
file.Now, your FiveM client will load the NUI, and the client.lua
script will send data to your React HUD, updating the health, hunger, thirst, speed, and other vehicle stats in real-time. You'll need to integrate the placeholder values in client.lua
with your actual QBX core functions for player status and vehicle data.
what should my fxmanifest look like