JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-contextmenu@2.9.1/dist/react-contextmenu.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-contextmenu@2.9.1/public/styles.css">
<div id="container"></div>
Babel + JSX
const { ContextMenuTrigger, ContextMenu, MenuItem } = ReactContextMenu;
class App extends React.Component {
static propTypes = {
name: PropTypes.string,
};
render() {
return (
<div>
<ContextMenuTrigger id="some_unique_identifier">
<div className="well">Right click to see the menu</div>
</ContextMenuTrigger>
<ContextMenu id="some_unique_identifier">
<MenuItem data={"some_data"} onClick={this.handleClick}>
ContextMenu Item 1
</MenuItem>
<MenuItem data={"some_data"} onClick={this.handleClick}>
ContextMenu Item 2
</MenuItem>
<MenuItem divider />
<MenuItem data={"some_data"} onClick={this.handleClick}>
ContextMenu Item 3
</MenuItem>
</ContextMenu>
</div>
);
}
}
ReactDOM.render(<App name="world"/>, document.getElementById('container'));