react-contexts-menu
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

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.

Package Sidebar

Install

npm i react-contexts-menu

Weekly Downloads

24

Version

1.1.4

License

MIT

Unpacked Size

18.7 kB

Total Files

7

Last publish

Collaborators

  • urveshgohil