martpie / react-keybinding-component

A declarative keybinding component for React
MIT License
9 stars 3 forks source link

API key mapping #1

Open martpie opened 8 years ago

martpie commented 8 years ago

Actually there's no "easy key mapping" like https://github.com/mapbox/react-keybinding#api

Think about a way to add them.

ideas:

<KeybindingContainer>
    <Keybinding key='enter' type='keyup' target='.css-target' />
    <Keybinding key='a' type='keydown' target={ window } />
</KeybindingContainer>
martpie commented 2 months ago

From #8: more generally, we should probably have a way to support accelerators (example: "CmdOrCtrl+A").

masudhossain commented 1 month ago

Any chance we could add Shift to modifier list?

masudhossain commented 3 weeks ago

Checking in if we can get the modifiers soon so we can add this library to our entire platform 🙏

martpie commented 3 weeks ago

The keyboard event is passed to the callback, so you can do the following right now:

onKey={(e) => {
  if (e.shiftKey) {
    // ... same with e.metaKey, ctrlKey, altKey, etc
  }
}}

https://w3c.github.io/uievents/#dom-keyboardevent-metakey

masudhossain commented 1 week ago

The keyboard event is passed to the callback, so you can do the following right now:

onKey={(e) => {
  if (e.shiftKey) {
    // ... same with e.metaKey, ctrlKey, altKey, etc
  }
}}

https://w3c.github.io/uievents/#dom-keyboardevent-metakey

Maybe i'm doing it wrong, but it doesn't seem like it lets me do combinations, right?

Like Shift + 1 Shift + 2 etc

martpie commented 1 week ago

You can build any kind of combination you need because you have the keyboard event object with all the information needed to filter by key or modifier.

Here’s a real life example on one of my projects:

https://github.com/martpie/museeks/blob/master/src/components/TracksList/TracksList.tsx#L164-L202