Use this: https://github.com/project-error/fivem-react-boilerplate-lua
Consider this repo archvied and no longer maintained.
First you need to change the resource name in the NuiProvider
.
// index.tsx
<NuiProvider resource="resource-name">
<App />
</NuiProvider>
Run yarn serve
while developing in the browser.
Run yarn build
to build the React project.
Now that you got this going, you're basiclally ready to go.
Let's cover the basics!
To get data from the client, we need to take use of the useNuiEvent
hook we get from fivem-nui-react-lib
.
const [visibility, setVisibility] = useState<boolean>(false);
useNuiEvent('RESOURCE', 'setVisibility', setVisibility);
So whats going on here? We are simply creating a state that uses the setter
in our useNuiEvent
hook to set the data to the state.
On the client it looks like this
SendNUIMessage({
app = "RESOURCE",
method = "setVisibility",
data = true
})
Yet to be written.