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

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

• 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.

• 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(50) 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"

• 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.

• useOutsideClick: <T extends HTMLElement>(ref: React.RefObject<T>, handler: (event: MouseEvent) => void) => void
  Calls the handler function when a click occurs outside the referenced element.
  Example: Close a dropdown when clicking outside of it.

• useDebounce: <T>(value: T, delay = 500) => T
  Returns a debounced version of the given value.
  Example: Prevent excessive API calls by debouncing user input.

• 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)

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! 😊