Hooks & Utilities

#Hooks

#useNuiEvent

Listens for NUI messages from Lua client scripts. Manages event listener lifecycle automatically.

tsx
import { useNuiEvent } from "dirk-cfx-react";

useNuiEvent<{ visibility: boolean }>("SET_VISIBLE", (data) => {
  setVisible(data.visibility);
});

The handler ref is updated on every render so you always have access to the latest closure values without re-registering the event listener.

#useAudio

Zustand store for playing audio files via NUI.

tsx
import { useAudio } from "dirk-cfx-react";

const { play, stop } = useAudio();
play("click.ogg");

#useTornEdges

Generates torn/ripped edge clip paths for paper-style UI elements.

---

#Utilities

#fetchNui

Sends a POST request to the Lua client via FiveM's NUI callback system.

tsx
import { fetchNui } from "dirk-cfx-react";

const result = await fetchNui<{ success: boolean }>("MY_EVENT", { id: 123 });

When running in a browser environment (outside FiveM), fetchNui returns mockData if provided, or an empty object with a console warning.

#locale

Locale string resolver. Fetches translations from the server via GET_LOCALES and supports %s placeholder substitution.

tsx
import { locale } from "dirk-cfx-react";

locale("FishCaught");              // → "Fish Caught"
locale("XPGained", "150", "Bass"); // → "You gained 150 XP from Bass"

Locale strings are loaded from your resource's locales/en.json (or whichever language is configured).

#useSettings

Zustand store holding server-provided settings. Populated automatically by DirkProvider.

tsx
import { useSettings } from "dirk-cfx-react";

const { currency, primaryColor, itemImgPath, game } = useSettings();

#useItems

Zustand store for inventory item definitions. Populated by the GET_ITEMS NUI callback.

tsx
import { useItems, getItemImageUrl } from "dirk-cfx-react";

const items = useItems();              // Record<string, ItemDef>
const url = getItemImageUrl("bass");   // full image URL

#colorWithAlpha

Helper to add alpha transparency to CSS colour strings.

tsx
import { colorWithAlpha } from "dirk-cfx-react";

colorWithAlpha("#4ade80", 0.5); // → "rgba(74, 222, 128, 0.5)"

#createSkill

Factory for creating RuneScape-style XP/level curves.

tsx
import { createSkill } from "dirk-cfx-react";

const FishingSkill = createSkill({
  baseLevel: 1,
  maxLevel: 99,
  baseXP: 83,
  modifier: 1,
});

FishingSkill.getLevelForXP(5000); // → 23
FishingSkill.getXPForLevel(50);  // → 101333

#inputMapper

Constants for FiveM input mapper categories and key names. Used internally by FiveMKeyBindInput.

tsx
import { INPUT_MAPPER_PRIMARY_OPTIONS, INPUT_MAPPER_KEYS_BY_PRIMARY } from "dirk-cfx-react";

// INPUT_MAPPER_PRIMARY_OPTIONS: ["KEYBOARD", "MOUSE_BUTTON", "PAD_DIGITALBUTTON", ...]
// INPUT_MAPPER_KEYS_BY_PRIMARY: { KEYBOARD: ["A", "B", "C", ...], ... }