derletzteritter / react-fivem-lua-boilerplate

A React boilerplate for FiveM, with Lua to easily set up a React project with Typescript.

A React boilerplate for FiveM, with Lua.

Disclaimer

Use this: https://github.com/project-error/fivem-react-boilerplate-lua

Consider this repo archived and no longer maintained.

Note

This repo is rather deprecated than anyhting. I recommend you use https://github.com/itschip/fivem-react-webpack5 instead.

Usage and installation

To use the boilerplate, clone or download the repo, and add it to your resource folder.

Installation

Run yarn or npm install in the web folder to install node_modules. This will make it possible to build and watch the files. So you can either develop in the browser and build a production build to use in the server.

If you have not installed yarn, or node for that sake, the links are below.

Yarn: (https://yarnpkg.com/getting-started/install)
Node: (https://nodejs.org/en/)

Note

If you change resource name, change the resource to match your resource name.

<NuiProvider resource="react-fivem-lua-boilerplate">
  <App />
</NuiProvider>

Develop

To open in the browser run yarn/npm run start.

Build

To build the NUI, after you have installed node_modules, you run yarn run build:resources, or npm run build:resources if you installed node_modules with npm

Example

Register a nui event

Nui part

core/hooks/useVisibilty

import { useRecoilValue } from 'recoil';
import { coreState } from './state';

export const useVisibility = () => {
  const visibility = useRecoilValue(coreState.visibility);
  return { visibility }
}

This creates the custom hook and uses the state from coreState states

import { atom } from 'recoil';

export const coreState = {
  visibility: atom({
    key: 'coreStateHidden',
    default: true
  }),
}

Then if you want to write to the state from client side, you need to create, what I like to call, a service for the hooks. Here is how it's done.

import { useSetRecoilState } from 'recoil';
import { useVisibility } from './useVisibility';
import { coreState } from './state';
import { useNuiEvent } from '../../nui-events/hooks/useNuiEvent';


export const useCoreService = () => {
  const setShowHide = useSetRecoilState(coreState.visibility);
  // You can change these strings to whatever you wish :)
  useNuiEvent("REACTNUI", "setVisibility", setShowHide);
  return useVisibility()
}

REACTNUI is the app, setVisibility is the method and setShowHide is the state you want to write to.

This is done so you can keep your SendNuiMessages more organizied.

Lua part

-- Example of how it works. Look at the `useCoreService`, and the nui function in `nui-events`

RegisterCommand('show:nui', function(source, args, rawCommand)
  SendNuiMessage({
    app = "REACTNUI",
    method = "setVisibility",
    data = true
  })
end, false)

There you go, if something is wrong, leave a issue for me to look at. Have fun!

react-fivem-lua-boilerplate's Issues

Command isn't working

I think I've installed it correctly, if I remove the style={ visibility ? { visibility: 'visible' } : { visibility: 'hidden' }} from the div in App.tsx the content shows up on the screen. But doing /show:nui doesn't seem to toggle the nui visibility. I can confirm that the command is being triggered as I can send a message to chat when I run the command. It's just the visibility doesn't seem to toggle.

Command doesn't work

Hi, I'm trying to get this boilerplate running on my FiveM server but when I do the /show:nui command, nothing happens. Even after I put a test text on the App.tsx and build it after.

Any clues?

Thanks in advance, and your project seems to be insanely helpful for further projects 👍