Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ardelan869/ragemenu
FiveM native Rage Menu, made with React
https://github.com/ardelan869/ragemenu
cfx fivem fivem-lua lua nativeui ragemenu rageui react reactjs tsx typescript
Last synced: 3 months ago
JSON representation
FiveM native Rage Menu, made with React
- Host: GitHub
- URL: https://github.com/ardelan869/ragemenu
- Owner: ardelan869
- License: cc-by-4.0
- Created: 2024-09-25T16:11:59.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-17T09:46:49.000Z (4 months ago)
- Last Synced: 2024-10-20T07:36:00.405Z (4 months ago)
- Topics: cfx, fivem, fivem-lua, lua, nativeui, ragemenu, rageui, react, reactjs, tsx, typescript
- Language: TypeScript
- Homepage:
- Size: 191 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ragemenu
FiveM native Rage Menu, built with React. [Documentation](https://docs.ardelanyamanel.com/ragemenu)
## Dependencies
- [Sumneko LLS for VSCode](https://marketplace.visualstudio.com/items?itemName=sumneko.lua)
## Features
- High-performance script
- Cached component and menu state
- Runtime-editable menus and components
- Fully typed
## Installation
1. Download the [latest release](https://github.com/ardelan869/ragemenu/releases/latest) from GitHub.
2. Extract the contents of the zip file into your `resources` folder.
3. Add the path of `meta.lua` to your [Sumneko LLS](https://marketplace.visualstudio.com/items?itemName=sumneko.lua) `workspace.library` setting.
4. Add `ensure ragemenu` to your `server.cfg`.
5. Add `@ragemenu/import.lua` to your desired resources `fxmanifest.lua` and start scripting!
## Example
> [!NOTE]
> The menu offers more components and functions.\
> See more [here](https://docs.ardelanyamanel.com/ragemenu)
```lua
--- you can create a menu once and reopen it at any time
--- state will be cached and reused
local menu = Menu:Create('Example', 'Example Subtitle', nil, nil, '')
-- 520 is a custom width, the default is
local submenu = Menu:Create('Submenu', 'Submenu Subtitle', 'top-right', 520)
submenu:AddButton('Submenu Button'):OnClick(function()
print('Submenu Button Clicked')
end)
menu:AddButton('Button', 'Button Right Label', 'Button Description'):OnClick(function()
print('Button Clicked')
end)
menu:AddSubmenu(submenu, 'Submenu Label', 'Right Label', 'Submenu Description')
menu:AddSeparator('Separator')
local checkbox = menu:AddCheckbox('Checkbox', 'Checkbox Description', {
right = 'card_suit_hearts'
}, true)
checkbox:OnCheck(function(checked)
print('Checkbox Checked', checked)
end)
menu:AddButton('Disable Checkbox'):OnClick(function()
checkbox:Disable(not checkbox.disabled)
print('Checkbox Disabled', checkbox.disabled)
end)
menu:AddButton('Toggle Checkbox Visibility'):OnClick(function()
checkbox:ToggleVisiblity(not checkbox.visible)
print('Checkbox Visibility', checkbox.visible)
end)
menu:AddList('List', 'List Description', {
right = 'card_suit_hearts'
}, {
'List Item 1',
'List Item 2',
'List Item 3'
}, 1):OnChange(function(current, currentValue)
print('List Changed', current, currentValue)
end)
menu:AddSlider('Slider', 'Slider Description', {
right = 'card_suit_hearts'
}, 100, 0, 10, 50):OnChange(function(current)
print('Slider Changed', current)
end)
RegisterCommand('example', function()
if menu:IsOpen() then
menu:Close()
else
menu:Open()
end
end, false)
```