fivem-nui-react-lib

A (very opinionated) set of tools for using FiveM NUI events in React

example

https://github.com/jfrader/fivem-nui-react-boilerplate

usage

install

npm install --save fivem-nui-react-lib

provider

You need a provider to set the resource name for events

1import { NuiProvider } from "fivem-nui-react-lib";
2
3function App() {
4  return (
5    <NuiProvider resource="my-resource-name">
6      <div>This is my app</div>
7    </NuiProvider>
8  );
9}

useNuiEvent

This library receives the following schema on NUI events

1{
2  app: 'app-name', // can be always the same or change to differenciate events better on the UI
3  method: 'method-name', // the actual event name which is sent to NUI
4  data: 'response' // the response which will be handled from the UI
5}

Receive events from client and set your state

1// UI
2import { useNuiEvent } from "fivem-nui-react-lib";
3
4function MyComponent() {
5  const [myState, setMyState] = useState(false);
6  useNuiEvent("app-name", "method-name", setMyState);
7}

1// CLIENT
2sendNuiMessage(
3  JSON.stringify({
4    app: "app-name",
5    method: "method-name",
6    data: true, // myState will be set as true in this example
7  })
8);

useNuiRequest

Send requests to client

1// UI
2import { useNuiRequest } from "fivem-nui-react-lib";
3
4function MyComponent() {
5  const { send } = useNuiRequest();
6  send("method-name", { myArgument: "isAwesome" });
7}

1// CLIENT
2RegisterNuiCallbackType(`myEvent`);
3on(`__cfx_nui:myEvent`, (data, cb) => {
4  // Use the arguments
5  emitNet("myEvent", { input: data.myArgument });
6  // Callback to prevent errors
7  cb();
8});

Send requests to another resoruce, overriding provider

1// UI
2import { useNuiRequest } from "fivem-nui-react-lib";
3
4function MyComponent() {
5  const { send } = useNuiRequest({ resource: "another-resource" });
6  send("method-name", { myArgument: "isAwesome" });
7}

useNuiCallback

Make a callback to "myEvent" by sending back "myEventSuccess" or "myEventError" from the client

1// UI
2import { useNuiCallback } from "fivem-nui-react-lib";
3
4function MyComponent() {
5  const [myState, setMyState] = useState(null);
6  const [error, setError] = useState(null);
7  const [fetchMyMethod, { loading }] = useNuiCallback("app-name", "myEvent", setMyState, setError);
8
9  useEffect(() => {
10    fetchMyMethod({ argument: 1 });
11  }, [fetchMyMethod]);
12}

1// CLIENT
2RegisterNuiCallbackType(`myEvent`);
3on(`__cfx_nui:myEvent`, (data, cb) => {
4  // emit some event to the server:
5  emitNet("myEvent", { input: data });
6  // callback so you prevent errors
7  cb();
8});
9
10// ... on success
11sendNuiMessage(
12  JSON.stringify({
13    app: "app-name",
14    method: "myEventSuccess",
15    data: true,
16  })
17);
18
19// ... on error
20sendNuiMessage(
21  JSON.stringify({
22    app: "app-name",
23    method: "myEventError",
24    data: true,
25  })
26);

The example above will request myEvent to the client and be in loading state until client sends back either myEventSuccess or myEventError. After one of those are received, the handlers will be executed (setMyState if success, setError if errored). If no event is received after the timeout time, it will throw as timeout error.

contributions

Feel free to contribute and/or suggest changes.

license

fivem-nui-react-lib - A set of tools for using FiveM NUI events in React

Copyright (C) 2023 Fran <jfrader.com> <github.com/jfrader>

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.