Playground | React Quick Menu

index.tsx

import React from "react";
  import ReactDOM from "react-dom";
  import { ContextMenuProvider } from "react-quickmenu";
  const root = ReactDOM.createRoot(document.getElementById("root"));
  // Wrap your app with ContextMenuProvider, give it a theme prop (light or dark)
  root.render(
    <ContextMenuProvider theme={"light"}>
      <App />
    </ContextMenuProvider>,
  );

App.tsx

const reactQuickMenuPlaygroundMenu = (
    <ContextMenu id={0}>
        <ContextMenuItem
          text="Edit this file"
          onClick={() => alert("Edit this file clicked")}
        />
  
        <ContextMenuItem
          text="Download this file"
          disabled
          onClick={() => alert("Download this file clicked")}
        />
  
        <ExpandingContextMenuItem text="More">
          <ContextMenu id={1}>
              <ContextMenuItem
                text="Copy this file"
                onClick={() => alert("Copy this file clicked")}
              />
  
              <ContextMenuItem
                text="Delete this file"
                onClick={() => alert("Delete this file clicked")}
              />
  
              <ExpandingContextMenuItem disabled text="Even More">
                <ContextMenu id={2}>
                    <ContextMenuItem
                      text="Rename this file"
                      onClick={() => alert("Rename this file clicked")}
                    />
                </ContextMenu>
              </ExpandingContextMenuItem>
          </ContextMenu>
        </ExpandingContextMenuItem>
    </ContextMenu>
  );
  
  function App() {
    return (
      <ContextMenuWrapper contextMenu={reactQuickMenuPlaygroundMenu}>
        <div>
          <p>React Quick Menu Playground</p>
  
          <p>Click right mouse button to see the context menu</p>
  
          <a href="https://react-quickmenu.vercel.app/docs/intro">
            Go back to the documentation
          </a>
        </div>
      </ContextMenuWrapper>
    );
  }

Theme