Basic Lua & (React + Vite + Mantine) Boilerplate
FiveM React Boilerplate This boilerplate provides a modern React setup specifically designed for FiveM development. Information Github Repository Fast Build System: Powered by Vite for quick and efficient development. UI Library: Built with Mantine UI to ensure a visually appealing...
forum.cfx.re
FiveM React 样板
该样板提供了专为 FiveM 开发设计的现代 React 设置。
Information
- Github 仓库
- 快速构建系统：由 Vite 提供支持，可实现快速高效的开发。
- UI 库：采用 Mantine UI 构建，以确保界面具有视觉吸引力。
- 灵活的工作流程：支持浏览器和游戏内开发，使其适用于各种场景。
- CfxLua 运行时兼容性：与 FiveM 应用程序的 CfxLua 运行时无缝集成。
Requirements
Getting Started
Installation
样板已构建pnpm但仍然兼容npm。- 克隆存储库或使用模板选项并将其放在您的resources文件夹中。
- 转到web您选择的终端内的文件夹并输入pnpm i或npm i。
Features
Web | Scripts
- （pnpm或npm）run dev– 启动开发服务器。
- （pnpm或npm）run build– 构建项目。
- （pnpm或npm）run build:watch——构建项目并观察变化。
- (pnpm或npm) run build:clean– 删除./build目录。
Web | VisibilityProvider
JavaScript：
// `VisibilityProvider` is a component that manages the visibility state of its children.
// Example:
<VisibilityProvider component='MDTComponent'>
<MDTComponent/>
</VisibilityProvider>Web | TriggerNuiCallback
JavaScript：
// Triggers a callback registered with the REGISTER_NUI_CALLBACK native.
// Example:
TriggerNuiCallback<any>('getPlayerInfo').then(info => {
setPlayerInfo(info);
});Web | HandleNuiMessage
JavaScript：
// `HandleNuiMessage` is a hook that listens for events sent from the client and invokes a handler when an event with the specified action is received.
// Example:
const [playerData, setPlayerData] = useState<PlayerData>([]);
HandleNuiMessage<any>('updatePlayerData', (data) => {
setPlayerData(data);
});Web | SendNuiMessage
JavaScript：
// Example:
// Triggers the `HandleNuiMessage` hook registered with the action `setVisibleApp`, passing `true` as the data payload to control the visibility of the application.
// This stimulates the SEND_NUI_MESSAGE native in the development environment.
SendNuiMessage([
{action: 'setVisibleApp', data: true}
]);Lua | handleNuiMessage
lua：
-- 1st argument its the message sent by SEND_NUI_MESSAGE native.
-- 2nd argument sets the SET_NUI_FOCUS native value.
-- Example:
handleNuiMessage({action = 'setVisibleApp', data = true}, true)
