Right Click Menu using React JS

Question

I\'d like to know if there is a best practice/correct way to setup a right-click menu for a React component.

I currently have this...

// nw is nw.gui         


        

Answer 1

There are few things to take care about with popup menus:

1. it should be rendered away from its parent and siblings - preferably in an overlay which is the last child of document.body
2. special logic should take care that it's always displayed on screen and never cropped by screen edges
3. if there is a hierarchy involved, child popups should be aligned to items from previous popup (opener).

I created a library which you can use to accomplish all of these:

http://dkozar.github.io/react-data-menu/

Answer 2

UPDATE:

Figured it out - here is what you can do

var addMenu;

componentWillMount: function() {
    addMenu = new nw.Menu();
    addMenu.append(new nw.MenuItem({
        label: 'doSomething',
        click: function() {
            // doSomething
        }
    }));
},

contextMenu: function(e) {
    e.preventDefault();
    addMenu.popup(e.clientX, e.clientY);
},

render: function(){
    return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button>
}

In render you can pass a function to onContextMenu for when a right click occurs for this react component.