gfxr-inventory

React-based drag-and-drop inventory UI for RedM/FiveM. Provides a modern inventory management interface with item categorization, weight management, and cross-inventory transfers.

Features

Drag-and-drop item management with @dnd-kit
Dual inventory display (player + secondary container/drop/store)
Item weight system with visual weight bars
Item categorization (Weapons, Armor, Consumables, All)
Item stacking and quantity splitting
Configurable slot count and max weight
Multi-framework support (ESX, QBCore)
Multi-language support

Dependencies

Dependency	Description
Framework	ESX or QBCore (auto-detected)
Inventory	One of: `qb-inventory`, `esx_inventoryhud`, `qs-inventory`, `codem-inventory`, `ox_inventory`
SQL Driver	One of: `oxmysql`, `ghmattimysql`, `mysql-async`

Installation

Add to server.cfg:
```
ensure gfxr-inventory
```

Build the UI (if not pre-built):

cd resources/[gfx]/gfxr-inventory/web
npm install
npm run build

Configure:
- config/client_config.lua - Inventory settings
- config/locale.lua - Language translations

Configuration

client_config.lua

Config = {
    PlayerInventorySettings = {
        slots = 20,           -- Number of player inventory slots
        maxWeight = 100       -- Max weight capacity (number or "infinite")
    }
}

locale.lua

Supports English and French. Uses _L(key) function for string lookups.

Commands

Command	Description
`/show-nui`	Opens the inventory UI (with test data)

NUI Events

Drag Item

Fired when items are moved between slots:

RegisterNUICallback('inventory:dragItem', function(data, cb)
    -- data.from: source inventory type
    -- data.to: target inventory type
    -- data.fromId: source slot ID
    -- data.toId: target slot ID
    cb({})
end)

Item Structure

{
    name = "bread",           -- Item identifier
    label = "Bread",          -- Display name
    count = 5,                -- Quantity
    weight = 0.5,             -- Weight per unit
    unique = false,           -- If true, items swap instead of stack
    description = "Fresh bread",
    image = "bread.png"       -- Item image
}

Drag-and-Drop Behavior

Same inventory: Items swap positions or stack if same type
Cross inventory: Items transfer between player and secondary inventory
Unique items: Always swap positions, never stack
Weight check: Transfers are validated against max weight before completing
Quantity input: Hold modifier to specify partial quantity transfers

Debug Mode

setr gfxr-inventory-debugMode 1

Development

cd web
npm run start:game   # Watch mode for in-game development