Keyboard shortcuts are a bit tricky to manage in web applications. 

consider a `Widget` component.

I want to be able to focus certain elements, and run functions on this component, based on keyboard shorcuts.

```
class Widget extends React.Component {
  componentDidMount() {
    this.setBindings()
  },
  componentWillUnmount() {
    this.removeBindings();
  }
} 

```

setBindings and removeBindings, would use a library like [mousetrap](https://craig.is/killing/mice) to bind specific keyboard shortcuts

Now, there's two problems with the above solution: 

1. It makes keyboard shortcut behavior unpredictable
	* Consider the case where two Widgets mount, one would override the other
2. Widget becomes tightly coupled with the shortcuts -- now if someone doesn't want to use shortcuts, they have to have some sort of flag on `Widget`. This destroy's the 'granularity' of the code -- ideally a user should be able to use Widget, then WidgetWithShortcuts, or something like this

Another potential solution, is to pass an instance 

```
const widgetShortcuts = (widgetInstance) => {
  return {
   'ctrl i': () => widgetInstance.focusInput(),
  }
}

```

The problem with the second solution is:

1. widgetInstance will have to expose a lot of publicly accessible methods, like focusSomeThing, or invokeProp, etc
2. if `Widget` wants to have some tooltip, that shows the keyboard shortcuts at certain places, the info about the keyboard shorcuts will be duplicated in different places. It will become possible to change the shortcuts in one place, and forget to do so in another places

Is there a best practice, or some ideas on how keyboard shortcuts can be implemented with solutions to the problems above?