Context Menu
The Context Menu is a Menu that is initialized inside a Popup component and it is opened on the onContextMenu
event.
Basic Usage
The following example demonstrates the Context Menu in action.
- Example
- View Source
- Open In Stackblitz
import React from 'react';
import ReactDOM from 'react-dom';
import { Menu, MenuItem } from '@progress/kendo-react-layout';
import { Popup } from '@progress/kendo-react-popup';
class App extends React.Component {
state = {
show: false
}
handleContextMenu = (e) => {
e.preventDefault();
this.offSet = { left: e.clientX, top: e.clientY };
this.setState({ show: true });
}
componentDidMount() {
document.addEventListener('click', () => {
this.state.show ? this.setState({ show: false }) : null;
})
}
render() {
return (
<div>
<div style={{
width: 300,
height: 200,
backgroundColor: "#5392e4",
justifyContent: "center",
display: "flex",
position: "absolute",
alignItems: "center",
left: this.state.left,
top: this.state.top
}}
onContextMenu={this.handleContextMenu}>
<p>Right click here to open Context menu</p>
</div>
<Popup show={this.state.show} offset={this.offSet}>
<Menu vertical={true} style={{ display: 'inline-block' }}>
<MenuItem text="Item1">
<MenuItem text="Item1.1" />
<MenuItem text="Item1.2">
<MenuItem text="Item1.2.1" />
<MenuItem text="Item1.2.2" />
</MenuItem>
</MenuItem>
<MenuItem text="Item2">
<MenuItem text="Item2.1" />
<MenuItem text="Item2.2" />
</MenuItem>
<MenuItem text="Item3" />
</Menu>
</Popup>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);