react-contexts-menu v1.1.4

react-contexts-menu

An intricately crafted React component renders React Contexts Menu into the DOM for efficient applications.

Installation

npm

npm install react-contexts-menu

yarn

yarn add react-contexts-menu

pnpm

pnpm add react-contexts-menu

Usage

The react-contexts-menu library offers a dedicated context menu component, streamlining the integration of sophisticated React features into applications.

All code illustrations are crafted with contemporary React script modules and syntax. Moreover, a commitment to compatibility with React JS is evident through the deliberate utilization of require(react-contexts-menu) in the examples.

React Contexts Menu Demo

How to Utilizing the React Contexts Menu Component

import React, { useEffect, useRef, useState } from "react";
import ContextMenu from "react-contexts-menu";

const MyComponent = () => {
  const [mainMenuVisible, setMainMenuVisible] = useState(false);
  const mainMenuRef = useRef(null);
  const outSideElementRef = useRef(null);

  return (
      <>
        <div ref={mainMenuRef} >
          <div ref={outSideElementRef}>
            <ContextMenu
              animation
              primaryMenuVisible={mainMenuVisible}
              setPrimaryMenuVisible={setMainMenuVisible}
              primaryElementRef={mainMenuRef}
            >
              {mainMenuVisible ?
                <div className="context-menu show">
                  <a href='/' className="context-item" onClick={(e) => { e.preventDefault(); }}>Menu 1</a>
                  <a href='/' className="context-item" onClick={(e) => { e.preventDefault(); }}>Menu 2</a>
                  <a href='/' className="context-item" onClick={(e) => { e.preventDefault(); }}>Menu 3</a>
                  <a href='/' className="context-item" onClick={(e) => { e.preventDefault(); }}>Menu 4</a>
                </div>
                : <></>}
            </ContextMenu>
          </div>
        </div>
      </>
  );
};
export default MyComponent;

Props