Radial Menu for FiveM,built with React

Related tags

Menu bcs_radialmenu
Overview

BCS Radial Menu

This project is to freshen up the options for free radial menu for FiveM. It is inspired by qb-radialmenu config and nashvail radial menu design.

Features

  • Optimized 0.00 (Depending on your framework max tested is 0.03)
  • Minimalistic Design with tooltip for label
  • Responsive Design
  • Flexible menu with exports for addition on the go
  • Supports ESX and QBCore for job menu

Screenshots & Preview

Youtube Preview

Documentation

A Menu option will have the properties of

Properties Detail
label Text to display in the tooltip (Must be unique)
icon Icon string (here is the list)
event Client or Server event to trigger
client True to trigger a client event and false to trigger server event
shouldClose Whether or not if the menu should close after clicking the option
args Arguments when triggering the event (Optional)

Configuring the menu and submenus can be done inside Config.RadialMenu in the config.lua.

Additionally to add an option in the home menu in a specific event (such as store car option in a parking lot), you can use

exports['hud']:addMenu({
    label = 'the label you want',
    icon = 'MdPhone', -- For example
    event = 'open:phone',
    client = true,
    shouldClose = true,
    args = {'test', '123', 4}
})

Don't forget to remove the menu after you are done with it. It takes the label property as its argument.

exports['hud']:removeMenu('the label you want')

To Create a menu option with a submenu, label, icon, and submenu properties are needed. In theory it should be possible to create as many submenu you want. For Example:

{
    label = 'Job Menu',
    icon = 'MdWork',
    submenu = {
        {
            label = 'the label you want',
            icon = 'MdPhone', -- For example
            event = 'open:phone',
            client = true,
            shouldClose = true,
            args = {'test', '123', 4}
        },
        -- and continues
    }
}

Further option can be seen in the config.lua folder!

Contributing

Contribution is welcome! Feel free to fork and create a pull request. I believe my code is still messy and needs more refactoring (as of 0.7.0 release)

Support

Further support or issue can be submitted in the github issue or in my (discord)[https://discord.gg/caa7xt2d8G]

Other Scripts

Acknowledgements

You might also like...
🍪 A stylized command menu for React.
🍪 A stylized command menu for React.

🚧 Superkey is under development and is not ready for production. If you have any bugs or problems please create an issue. 🚧 Website (working 😊 ) •

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

React Native Hold Menu A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥 This package is experimental and

Smart data-driven menu rendered in an overlay
Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

Navigation drawer built with the awesome react-motion
Navigation drawer built with the awesome react-motion

ARCHIVED because I didn't have time nor use for this for a long time. I'd be happy to transfer ownership if someone is interested. react-motion-drawer

:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage OffCanvas width={300} transition

A react lib for building circular menus in a very easy and handy way.
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Tiny react library for building tooltips, flyovers, menus and more
Tiny react library for building tooltips, flyovers, menus and more

Postel 🌑 Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sens

Comments
  • back to previous menu

    back to previous menu

    Hi, first of all thank you for your sharing and i love the work. 👍 🥇

    i have one issue, cant call it issue but when you are going inside the menu and choosing for example work and etc. there is no way back only way is closing and start again? if not can be added instead of closing and start again have a back option and when you are in main menu can close (for fast closing can use key ESC) :)

    enhancement 
    opened by BlacknGoldy 1
Releases(v1.0)
Owner
BagusCodeStudio
FiveM Developer & Web Developer. Still mastering React to this day
BagusCodeStudio
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

Wojtek 5 May 24, 2021
Animated hamburger menu icons for React (1.5 KB) 🍔

‌ ‌ Animated hamburger menu icons for React Hamburger menu icons for React, with CSS-driven transitions. Created to be as elegant and performant as po

Luuk de Vlieger 709 Dec 31, 2022
React Dropdown Menu

React Dropdown Menu

Mikkel Laursen 142 Dec 3, 2022
Hamburger Menu React JS Using Third Party Package ReactJS - Popup

In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now. Refer to the image below: Design Files Click to v

null 2 Dec 6, 2021
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Nathan Braun 6 Nov 13, 2022
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

Huang-Ming Chang 120 Dec 1, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

Eddie McLean 19 May 27, 2022
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Streak 79 Nov 16, 2022
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

Fadi Khadra 868 Jan 8, 2023
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

Social Tables 58 Dec 5, 2022