https://github.com/ardelan869/fivem-frontend-boilerplates

Frontend Boilerplates, for FiveM Resources
https://github.com/ardelan869/fivem-frontend-boilerplates

cfx cfx-resource fivem react reactjs solid solidjs typescript vite vitejs vue vuejs

Last synced: 5 days ago
JSON representation

Frontend Boilerplates, for FiveM Resources

• Host: GitHub
• URL: https://github.com/ardelan869/fivem-frontend-boilerplates
• Owner: ardelan869
• Created: 2024-04-14T08:27:52.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-10-31T13:34:36.000Z (15 days ago)
• Last Synced: 2024-10-31T14:32:56.745Z (15 days ago)
• Topics: cfx, cfx-resource, fivem, react, reactjs, solid, solidjs, typescript, vite, vitejs, vue, vuejs
• Language: TypeScript
• Homepage:
• Size: 91.8 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚀 FiveM Frontend Boilerplates

A collection of frontend boilerplates for developing FiveM UIs with popular frameworks like [React](https://react.dev/), [Vue](https://vuejs.org/), and [Solid](https://solidjs.com/).

> [!NOTE]

> Inspired by and based on [FiveM React Boilerplate Lua](https://github.com/project-error/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(event: string, data?: any, mockData?: T) => Promise`**  

  Fetches or emits data to the Nui resource.  

  _Example: `fetchNui("getPlayerData", { id: 1 })`_

- **`debugData
(events: DebugEvent
[], 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](https://react.dev/)

- [Vue](https://vuejs.org/)

- [Solid](https://solidjs.com/)

---

Feel free to explore and contribute! 😊