React.js Blueprint ContextMenu2 Props
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss the React.js Blueprint ContextMenu2 Props. Context menus display a list of actions after right-clicking on a target element. The ContextMenu2 is just a replacement for ContextMenu and ContextMenuTarget.
React.js BluePrint ContextMenu2 Props:
- children: It denotes the context menu target.
- className: It denotes a space-delimited list of class names to pass along to a child element.
- content: It displays menu content and is usually a Blueprint <Menu> component.
- disabled: It determines whether the context menu is disabled.
- onContextMenu: It is an optional context menu event handler and is used when we want to do something with the mouse event unrelated to rendering the context menu itself when setting a state in react.
- popoverProps: It denotes a limited subset of props to forward along to the popover generated by the contextMenu component.
- tagName: It denotes a HTML tag used for container element.
Syntax:
<ContextMenu content={...} ... > <div>Right Click</div> </ContextMenu>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Step 4: Installing @blueprintjs popover2 component.
npm install @blueprintjs/popover2
Project Structure:
Step 5: Run the project as follows:
npm start
Example 1: The below example demonstrates the basic usage of the contextMenu2 component.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; import { Menu } from "@blueprintjs/core" ; import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2" ; import "@blueprintjs/select/lib/css/blueprint-select.css" ; function App() { return ( <center> <div style={{ textAlign: "center" , color: "green" }}> <h1>w3wiki</h1> <h2>ReactJs Blueprint ContextMenu2 Props</h2> </div> <ContextMenu2 content={ <Menu> <MenuItem2 icon= "git-repo" text= "Git Repo" /> <MenuItem2 icon= "git-commit" text= "Commit" /> <MenuItem2 icon= "git-merge" text= "Merge" /> <MenuItem2 icon= "git-branch" text= "Branch" /> </Menu> } > <div className= "my-context-menu-target" style={{ backgroundColor: "#1EA902" , color: "white" , width: 100, padding: 10, borderRadius: 20, }} > Right Click </div> </ContextMenu2> </center> ); } export default App; |
Output:
Example 2: The below example demonstrates the usage of the disabled contextMenu2 component.
Javascript
import React from "react" ; import "@blueprintjs/core/lib/css/blueprint.css" ; import { Menu } from "@blueprintjs/core" ; import { ContextMenu2, MenuItem2 } from "@blueprintjs/popover2" ; import "@blueprintjs/select/lib/css/blueprint-select.css" ; function App() { return ( <center> <div style={{ textAlign: "center" , color: "green" }}> <h1>w3wiki</h1> <h2>ReactJs Blueprint ContextMenu2 Props</h2> </div> <ContextMenu2 disabled={ true } content={ <Menu> <MenuItem2 icon= "git-repo" text= "Git Repo" /> <MenuItem2 icon= "git-commit" text= "Commit" /> <MenuItem2 icon= "git-merge" text= "Merge" /> <MenuItem2 icon= "git-branch" text= "Branch" /> </Menu> } > <div className= "my-context-menu-target" style={{ backgroundColor: "#1EA902" , color: "white" , width: 100, padding: 10, borderRadius: 20, }} > Right Click </div> </ContextMenu2> </center> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#popover2-package/context-menu2.props