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

Name	Type	Default Value	Description
animation	boolean	false	Provide animation contexts menu.
animationTransition	number	150	Provide transition effect on contexts menu.
primaryElementRef	Ref Element (Primary)	" "	Referencing the primary element allows for specifying the element from which the context menu should be triggered.
secondaryElementRef	Ref Element (Secondary)	" "	Referencing the secondary element allows for specifying the element from which the context menu should be triggered.
primaryMenuVisible	state	" "	Setting the state associated with the primary context menu to true will result in the primary context menu becoming visible.
setPrimaryMenuVisible	setState	" "	The primary context menu becomes visible upon invoking the setState function in response to a click event. This action triggers a re-render of the component, and as a result, the primary context menu is displayed.
secondaryMenuVisible	state	" "	Setting the state associated with the secondary context menu to true will result in the secondary context menu becoming visible.
setSecondaryMenuVisible	setState	" "	The secondary context menu becomes visible upon invoking the setState function in response to a click event. This action triggers a re-render of the component, and as a result, the secondary context menu is displayed.