Skip to main content

Installation - Quick Start

To add React Quick Menu to your project, follow these steps:

Installation via NPM​

React Quick Menu can be easily integrated into your project via NPM (Node Package Manager). Open your terminal or command prompt in the root directory of your project and run the following command:

npm install react-quickmenu --save

The above command will download the React Quick Menu package to your project and add it to your dependencies.

Usage​

After adding the package to your project, you can start using React Quick Menu. First, you'll need to integrate the Context Menu provider into your project. To do this, add the ContextMenuProvider component to a top-level component in your project.

import { ContextMenuProvider } from "react-quickmenu";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ContextMenuProvider theme={"dark"}>
    <App />
  </ContextMenuProvider>
);

Next, you can define the context menu using the ContextMenuWrapper component within any component where you want to use the context menu.

import { ContextMenuWrapper, ContextMenu, ContextMenuItem } from 'react-quickmenu';

const MyComponent = () => {
  const contextMenu = (
    <ContextMenu id={0}>
        <ContextMenuItem text="MenuItem 1" onClick={() => alert("MenuItem 1 clicked")} />
        <ContextMenuItem text="MenuItem 2" onClick={() => alert("MenuItem 2 clicked")} />
    </ContextMenu>
  );

  return (
    <ContextMenuWrapper contextMenu={contextMenu}>
      <div>
        {/* Content */}
      </div>
    </ContextMenuWrapper>
  );
};