advice on how to implement a more complex arrangement

[datapimp]

Hi, I am sorry if this was elaborated on somewhere and I missed it.

I have what I think is a typical use case for a library like this. A single page application that uses react-router.I have some global key bindings, and then some keybindings which may only be relevant when that page's component is mounted / active

For the purposes of discussion, say it looks like:

- App keybindings: {"ctrl+s": "SAVE"}
  - Router
    - Page
    - Page
    - Page keybindings: {"ctrl+s": "SPECIAL_SAVE" }

Should I not attempt to implement globals and just push all of the keybinding config into the components, and then have the components handle using the global behavior manually in my handler definition?

Please advise. Thank you.

[tmcw]

Gotcha: so, the case of unmounting & mounting keybindings is thoroughly solved, but I haven't yet decided on behavior when the same keybinding is defined more than once: #1 - maybe like document-title, this should prefer the most-deeply-nested component's binding?

[datapimp]

I had an idea - check out https://github.com/madrobby/keymaster

That library has a feature called 'scopes'

# 2nd argument is scope, defaults to "all"
key("ctrl + s", "all", -> App.save())
key("ctrl + g", "all", -> App.global())

# special scope
key("ctrl + s", "special", -> App.specialSave())

Elsewhere in the app you can

key.setScope "special"

I'm not sure how this is implemented under the hood, but I could see using some identifier in the react component tree to automatically handle this.

[gaearon]

@datapimp I think DocumentTitle-like approach is far simpler. Check it out!

[gaearon]

@datapimp

This would look like:

// App.js

render() {
  return (
    <KeyBindings mapping={{
      'ctrl+s': this.handleSave,
      'ctrl+p': this.handlePrint
    }}>
      <div>
        here goes your usual App render content
        <RouteHandler />
      </div>
    </KeyBindings>
  );
}

// Page.js
render() {
    return (
    <KeyBindings mapping={{
      'ctrl+s': this.handleLocalSave
    }}>
      <div>
        here goes your usual page content
      </div>
    </KeyBindings>
  );
}

If we go that way, Page's ctrl+s binding will override App's ctrl+s binding, but ctrl+p will remain tied to App.

[datapimp]

This is interesting, thanks @gaearon

I am learning more and more about react internals. Could this also be something you do in a mixin? It feels unnatural to put it in the render block. I'm looking at your DocumentTitle repo now.

[tmcw]

👍 cool @datapimp @gaearon will begin the side-effectification of this this weekend :)

[gaearon]

Let me know if you have any issues!

[gaearon]

Could this also be something you do in a mixin? It feels unnatural to put it in the render block.

It felt so to me at first, but I got used to it and IMO this approach rocks (provides clear “scope” for side effects). Also “no mixins” means usable in ES6 classes in React 0.13.

[datapimp]

I think it will grow on me, thanks a lot @gaearon @tmcw