import React from "react";
import ReactDOM from "react-dom";
import { ContextMenu, MenuItem, ContextMenuLayer } from "react-contextmenu";

//Component on which context-menu must be triggred
const MyComponent = ContextMenuLayer("some_unique_identifier", (props) => {
    return {
        prop1: props.myProp
    };
})(React.createClass({
    render() {
        <div className="well"></div>
    }
}));

//The context-menu to be triggered
const MyContextMenu = React.createClass({
    render() {
        <ContextMenu identifier="some_unique_identifier" currentItem={this.currentItem}>
            <MenuItem data={"some_data"} onSelect={this.handleSelect}>
                ContextMenu Item 1
            </MenuItem>
            <MenuItem data={"some_data"} onSelect={this.handleSelect}>
                ContextMenu Item 2
            </MenuItem>
            <MenuItem divider />
            <MenuItem data={"some_data"} onSelect={this.handleSelect}>
                ContextMenu Item 3
            </MenuItem>
        </ContextMenu>
    },
    handleSelect(data, item) {
        console.log(data, item);
    }
});

const MyApp = React.createClass({
    render() {
        <div>
            <MyComponent {...this.props}/>
            <MyContextMenu />
        </div>
    }
});

ReactDOM.render(<MyApp myProp={12}/>, document.getElementById("main"));