ContextMenu2 migration

Requirements

• <ContextMenu2> is provided in the @blueprintjs/popover2 package, so make sure to check out the Popover2 migration guide.

Notable changes compared to ContextMenu & ContextMenuTarget

The context menu API has been simplified greatly so that it works much more like a popover. The new component does not require your build system to support decorators and it can be used with function components. It wraps a target element which will receive contextmenu events (right click) and expects menu content supplied as a prop:

import { Menu, MenuItem } from "@blueprintjs/core";
import { ContextMenu2 } from "@blueprintjs/popover2";

export default function ContextMenuExample() {
    return (
        <ContextMenu2
            content={
                <Menu>
                    <MenuItem text="Save" />
                    <MenuItem text="Save as..." />
                    <MenuItem text="Delete..." intent="danger" />
                </Menu>
            }
        >
            <div className="my-context-menu-target">
                Right click me!
            </div>
        </ContextMenu2>
    );
}