Ability to scope to elements

[amcdnl]

It would be nice if it had to ability to scope based on a ref. Example:

  const ref = useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1));
    
  return (
    <p ref={ref} tabindex={-1}>
      Pressed {count} times.
    </p>
  );

[JohannesKlauss]

I am not quite sure if I understand what the benefit would be there. What does the ref gain?
The scope is the component itself.
Or do you want the hotkey to only execute if the ref is set?

[Taymindis]

Could it be scope down to specific Element ? If i focus that box, i move that box by using left/right

Example :
https://codesandbox.io/s/react-hotkeys-hook-fwllq?file=/src/index.js

[amcdnl]

Take a look at this library: https://github.com/greena13/react-hotkeys

Imagine the following scenario: User has multiple tree components on a page. When a user focuses one of them, I want them to be able to expand all the nodes on the tree w/ a keyboard shortcut but only the one they have in focus.

Other scenarios might involve binding specific hotkeys to an input for autocomplete features, etc.

[frycz]

@JohannesKlauss

I think I am seeing a similar issue as @amcdnl is. When I use hotkeys hook in one component, the hook callback is fired even if another component is focused.

Please, take a look at an example here and let me know if this behaviour is expected, more details included there
https://codesandbox.io/s/react-hotkeys-hook-i17l8?file=/src/index.js

Thanks!

[JohannesKlauss]

My computer broke down few weeks ago, so i don't have the possibility to dig into this, although this might be related to #276
As soon as i get a working machine running, I'll come back to you

[JohannesKlauss]

@frycz The enabled tags are a global setting in the underlying hotkeys.js package as issued in #276. Only viable solution would be to create a custom implementation, but I don't have the time for that.

Also the scope itself is set global, so this is the reason why the hotkeys aren't scoped to the component it is used in. When creating this library I just needed a quick wrapper around a hotkeys package for some functionality and didn't think much about other use cases.
The solution here would be a custom implementation as well. But I don't have the resources to create such a thing right now.

[frycz]

@JohannesKlauss, Yea, we already have implemented a custom solution. Thanks for your answer anyway, cheers

[amcdnl]

@frycz - mind sharing?

[frycz]

No problem. After analyzing our needs we realized that our case is so simple that we don't need any external libraries nor generic solutions. We just added a keydown event listener to our input component.

[JohannesKlauss]

@amcdnl just to give an update on this, i am currently investigating on this feature as well as the ability to get all hotkeys.

[JohannesKlauss]

Using 2.2.0 the hook returns an RefObject that can be set to any element taking a ref. Then the callback will only get executed when the reffed object is focused.

[Taymindis]

Using 2.3.0 the hook returns an RefObject that can be set to any element taking a ref. Then the callback will only get executed when the reffed object is focused.

Hi @JohannesKlauss , It's should be 2.2.0 instead of 2.3.0 right?

[JohannesKlauss]

@Taymindis Yes, of course. my bad.