🚀 FiveM Frontend Boilerplates

A collection of frontend boilerplates for developing FiveM UIs with popular frameworks like React, Vue, and Solid.

Note

Inspired by and based on FiveM React Boilerplate Lua

✨ Features

This boilerplate includes a set of helpful libraries (/lib) to make your development smoother and more efficient.

---

🔧 /constants

• isEnvBrowser: boolean
  Determines if the current environment is a browser.
  Usage: Conditionally execute code depending on the environment.

• noop: () => void
  A no-op function that does nothing.
  Usage: Useful as a placeholder or default callback.

---

🎨 /css

• vh: (i: number) => string
  Converts a number (representing px) to a vh (viewport height) value.
  Example: vh(100) returns "9.2593vmin"

• vw: (i: number) => string
  Converts a number (representing px) to a vw (viewport width) value.
  Example: vw(50px) returns "4.6296vmin"

• vmin: (i: number) => string
  Converts a number (representing px) to a vmin value (smallest viewport dimension).
  Example: vmin(25) returns "2.3148vmin"

---

🛠️ /hooks

• useEvent: (event: string, callback: (...args: unknown[]) => void) => void
  Listens to the specified window events and runs the callback.
  Example: useEvent("click", handleClick) to capture click events.

• useNuiEvent: (action: string, callback: (...args: unknown[]) => void) => void
  Listens for a Nui event and triggers the provided callback.
  Example: useNuiEvent("actionName", handleNuiEvent)

• useDebugData: (events: { action: string; data: any }[], timer?: number) => void
  Similar to debugData, but wrapped inside a useEffect (React) or onMount (Vue/Solid) hook.
  Example: Use this for triggering debug events in the browser environment.

---

🌐 /index

• fetchNui<T = unknown>(event: string, data?: any, mockData?: T) => Promise<void | T>
  Fetches or emits data to the Nui resource.
  Example: fetchNui("getPlayerData", { id: 1 })

• debugData<P>(events: DebugEvent<P>[], timer?: number) => void
  Triggers useNuiEvent listeners when in a browser environment for debugging.
  Example: Simulate Nui events during development using this function.

---

⌨️ /keys

• useKeyEvent(action: 'keydown' | 'keyup', key: string | string[], handler: (data: KeyboardEvent) => void, options?: { ctrlKey?: boolean, shiftKey?: boolean, altKey?: boolean, metaKey?: boolean }) => void
  Adds a keydown or keyup event listener to the window.
  Example: Capture keypresses like useKeyEvent('keydown', 'Enter', handleKeyPress)

• useKeyUp(key: string | string[], handler: (data: KeyboardEvent) => void, options?: { ctrlKey?: boolean, shiftKey?: boolean, altKey?: boolean, metaKey?: boolean }) => void
  Adds a keyup event listener.
  Example: Detect when the user releases a key like useKeyUp('Escape', handleClose)

• useKeyDown(key: string | string[], handler: (data: KeyboardEvent) => void, options?: { ctrlKey?: boolean, shiftKey?: boolean, altKey?: boolean, metaKey?: boolean }) => void
  Adds a keydown event listener.
  Example: Detect when the user presses a key like useKeyDown('F1', handleToggleMenu)

---

📚 Documentation

Each of these hooks and utilities is designed to streamline frontend development for FiveM, providing built-in compatibility with Nui events and efficient handling of UI logic.

For further information and examples, please refer to the respective libraries' documentation:

• React
• Vue
• Solid

---

Feel free to explore and contribute! 😊