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