Repository files navigation

This repository is a basic boilerplate for getting startedwith React in NUI. It contains several helpful utilities andis bootstrapped usingcreate-react-app. It is for both browserand in-game based development workflows.

For in-game workflows, Utilizingcraco to override CRA, we can have hotbuilds that just require a resource restart instead of a fullproduction build

This version of the boilerplate is meant for the CfxLua runtime.

• Node > v10.6
• Yarn (Preferred but not required)

A basic understanding of the modern web development workflow. If you don'tknow this yet, React might not be for you just yet.

First clone the repository or use the template option and placeit within yourresources folder

The boilerplate was made usingyarn but is still compatible withnpm.

Install dependencies by navigating to theweb folder withina terminal of your choice and typenpm i oryarn.

This boilerplate comes with some utilities and examples to work off of.

SendReactMessage

This is a small wrapper for dispatching NUI messages. This is designedto be used with theuseNuiEvent React hook.

Signature

---@paramactionstring The action you wish to target---@paramdataany The data you wish to send along with this actionSendReactMessage(action,data)

Usage

SendReactMessage('setVisible',true)

debugPrint

A debug printing utility that is dependent on a convar,if the convar is set this will print out to the console.

The convar is dependent on the name given to the resource.It follows this formatYOUR_RESOURCE_NAME-debugMode

To turn on debugMode addsetr YOUR_RESOURCE_NAME-debugMode 1 toyour server.cfg or use thesetr console command instead.

Signature (Replicatesprint)

---@param ...any[] The arguments you wish to senddebugPrint(...)

Usage

debugPrint('wow cool string to print',true,someOtherVar)

Signatures are not included for these utilities as the type definitionsare sufficient enough.

useNuiEvent

This is a custom React hook that is designed to intercept and handlemessages dispatched by the game scripts. This is the primaryway of creating passive listeners.

Note: For now handlers can only be registered a single time. I haven'tcome across a personal usecase for a cascading event system

Usage

constMyComp:React.FC=()=>{const[state,setState]=useState('')useNuiEvent<string>('myAction',(data)=>{// the first argument to the handler function// is the data argument sent using SendReactMessage// do whatever logic u want heresetState(data)})return(<div><h1>Some component</h1><p>{state}</p></div>)}

fetchNui

This is a simple NUI focused wrapper around the standardfetch API.This is the main way to accomplish active NUI data fetchingor to trigger NUI callbacks in the game scripts.

When using this, you must always at least callback using{}in the gamescripts.

This can be heavily customized to your use case

Usage

// First argument is the callback event name.fetchNui<ReturnData>('getClientData').then(retData=>{console.log('Got return data from client scripts:')console.dir(retData)setClientData(retData)}).catch(e=>{console.error('Setting mock data due to error',e)setClientData({x:500,y:300,z:200})})

debugData

This is a function allowing for mocking dispatched game scriptactions in a browser environment. It will triggeruseNuiEvent handlersas if they were dispatched by the game scripts.It will only fire if the currentenvironment is a regular browser and not CEF

Usage

// This will target the useNuiEvent hooks registered with `setVisible`// and pass them the data of `true`debugData([{action:'setVisible',data:true,}])

Misc Utils

These are small but useful included utilities.

• isEnvBrowser() - Will return a boolean indicating if the currentenvironment is a regular browser. (Useful for logic in development)

This boilerplate was designed with development workflow in mind.It includes some helpful scripts to accomplish that.

Hot Builds In-Game

When developing in-game, you can use the hot build system byrunning thestart:game script. This is essentially the startscript but it writes to disk. Meaning all that is required is aresource restart to update the game script

Usage

# yarnyarn start:game# npmnpm run start:game

Production Builds

When you are done with development phase for your resource. Youmust create a production build that is optimized and minimized.

You can do this by running the following:

npm run buildyarn build

Need further support? Join ourDiscord!