FiveM React UI Library

A library for FiveM UI communication between Lua and React, with a powerful store system based on Zustand.

Installation

1npm install fivem-react-ui-lib

Features

• NUI communication with FiveM using fetchNui
• Mock data system for development without FiveM
• Powerful state management using Zustand
• Real-time updates with NUI events
• Type-safe API

Store System

The library provides a powerful store system based on Zustand that makes it easy to communicate with FiveM and manage your UI state.

Basic Usage

1import { createStore } from 'fivem-react-ui-lib';
2
3// Define your data interface
4interface Vehicle {
5  id: number;
6  plate: string;
7  model: string;
8  owner: string;
9}
10
11// Create a store
12const useVehicleStore = createStore<Vehicle[], Vehicle>({
13  name: 'vehicles',
14  fetchEvent: 'getVehicles',
15  createEvent: 'createVehicle',
16  updateEvent: 'updateVehicle',
17  deleteEvent: 'deleteVehicle',
18  initialData: []
19});
20
21// In your component
22function VehicleList() {
23  const { data: vehicles, isLoading, fetch, create, update, delete: deleteVehicle } = useVehicleStore();
24  
25  useEffect(() => {
26    fetch();
27  }, [fetch]);
28  
29  // Use store methods for CRUD operations
30  const handleAddVehicle = () => {
31    create({ plate: 'ABC123', model: 'adder', owner: 'Player' });
32  };
33  
34  return (
35    <div>
36      {isLoading ? <p>Loading...</p> : (
37        <ul>
38          {vehicles?.map(vehicle => (
39            <li key={vehicle.id}>{vehicle.model} ({vehicle.plate})</li>
40          ))}
41        </ul>
42      )}
43      <button onClick={handleAddVehicle}>Add Vehicle</button>
44    </div>
45  );
46}

Cached Stores

For better performance, you can use cached stores:

1import { createCachedStore } from 'fivem-react-ui-lib';
2
3const usePlayerStore = createCachedStore<Player[], Player>(
4  {
5    name: 'players',
6    fetchEvent: 'getPlayers',
7    initialData: []
8  },
9  {
10    ttl: 60000, // Cache valid for 60 seconds
11    invalidateOnMutation: true // Invalidate cache on create/update/delete
12  }
13);

Real-time Updates

Listen for NUI events to update your store in real-time:

1import { useStoreEvents } from 'fivem-react-ui-lib';
2
3function PlayerList() {
4  const { data: players, fetch, setData } = usePlayerStore();
5  
6  // Initial data fetch
7  useEffect(() => {
8    fetch();
9  }, [fetch]);
10  
11  // Set up real-time updates
12  useStoreEvents({
13    actions: {
14      'playerJoined': (newPlayer) => {
15        setData([...(players || []), newPlayer]);
16      },
17      'playerLeft': (data) => {
18        setData(players?.filter(p => p.id !== data.id) || []);
19      }
20    }
21  });
22  
23  // Rest of your component...
24}

Development Mode

The library includes a development mode that works without FiveM, allowing you to develop your UI in any browser.

1import { registerMockData, IsDevMode } from 'fivem-react-ui-lib';
2
3// Set up mock data for development
4if (IsDevMode()) {
5  registerMockData({
6    getVehicles: {
7      request: {},
8      response: [
9        { id: 1, plate: 'ABC123', model: 'adder', owner: 'Player1' },
10        { id: 2, plate: 'XYZ789', model: 'zentorno', owner: 'Player2' }
11      ]
12    }
13  });
14}

License

MIT