Skip to content

Commit

Permalink
[docs] Suggest using ContextMenuTarget as a HOC (#3259)
Browse files Browse the repository at this point in the history
Instead of falling back to the imperative API, suggest using `ContextMenuTarget`, where decorators are not an option.
  • Loading branch information
ClaudiuCeia authored and adidahiya committed Jan 8, 2019
1 parent 7e8bf8e commit d8b247a
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions packages/core/src/components/context-menu/context-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,36 @@ class RightClickMe extends React.Component<{}, {}> {
}
```

If you're using Blueprint in Javascript, and don't have access to the Babel config (ie: using `create-react-app`), you won't be able to just use the decorator. You can, instead, use it as a [Higher-Order Component][react-hoc], and get to keep all the benefits of `ContextMenuTarget`:

```jsx
import { ContextMenuTarget, Menu, MenuItem } from "@blueprintjs/core";

const RightClickMe = ContextMenuTarget(class RightClickMeWithContext extends React.Component {
render() {
// root element must support `onContextMenu`
return <div>{...}</div>;
}

renderContextMenu() {
// return a single element, or nothing to use default browser behavior
return (
<Menu>
<MenuItem onClick={this.handleSave} text="Save" />
<MenuItem onClick={this.handleDelete} text="Delete" />
</Menu>
);
}

onContextMenuClose() {
// Optional method called once the context menu is closed.
}
});
```

[ts-decorator]: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md
[wiki-cm]: https://en.wikipedia.org/wiki/Context_menu
[react-hoc]: https://reactjs.org/docs/higher-order-components.html

@## Imperative usage

Expand Down

1 comment on commit d8b247a

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs] Suggest using `ContextMenuTarget` as a HOC (#3259)

Previews: documentation | landing | table

Please sign in to comment.