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. |