Ability to get all hotkeys about react-hotkeys-hook

[JohannesKlauss]

I thought about this a bit longer because I stumbled over the same need to have all hotkeys in one place and I came to the conclusion that this shouldn't be a feature at all.

Because this feature request reverses the source of truth.
You need to know the hotkey combinations and their functions beforehand anyways. So instead of returning the assigned hotkeys from the hook, you should have a hotkey map and use the values to assign the useHotkeys hooks.

Pseudocode wise it would look something like this:

// Somewhere in your project.
const hotkeyMap = {
  "PRINT": "Shift+F12",
  // ...
};

// ...

// in your component
function PrintComponent() {
  useHotkeys(hotkeyMap['PRINT'], printHandler);

  return (
    // ...
  );
}

This way you can achieve exactly what you want and the hook stays clean. You could also have multiple functionalities for the same hotkey stroke and still differentiate between them which you cannot when the hook would have to keep track of it.

[JohannesKlauss]

@amcdnl This hook is just a wrapper around the hotkeys package. So that would be a feature to request there.

[amcdnl]

Actually you could just handle this in your registration hook. Heres a use case I'm using react-hotkeys for:

import React, { useState } from 'react';
import { Dialog } from 'shared/Dialog';
import { GlobalHotKeys, getApplicationKeyMap } from 'react-hotkeys';
import { startCase } from 'lodash-es';
import css from './HotkeyDialog.module.scss';

const KEY_MAP = {
  SHOW: 'shift+?'
};

export const HotkeyDialog = ({ children }) => {
  const [visible, setVisible] = useState(false);
  const keys = getApplicationKeyMap() || [];

  return (
    <GlobalHotKeys
      keyMap={KEY_MAP}
      handlers={{
        SHOW: () => setVisible(true)
      }}
    >
      <Dialog
        size="550px"
        header="Hotkeys"
        open={visible}
        onClose={() => setVisible(false)}
      >
        {visible && (
          <ul className={css.list}>
            {Object.keys(keys).map(k => (
              <li key={k} className={css.listItem}>
                <strong>{startCase(k)}</strong>:{' '}
                {keys[k].sequences.map(kk => (
                  <span key={kk.sequence} className={css.keyCombo}>
                    {kk.sequence}
                  </span>
                ))}
              </li>
            ))}
          </ul>
        )}
      </Dialog>
      {children}
    </GlobalHotKeys>
  );
};

[JohannesKlauss]

I'll think about it. Generally I don't like to add global state to a modular hook. Although you could argue that the hotkeys package itself is acting globally. I know that this would be a useful feature, but I still think it would be better to add it to the core hotkeys package.

[amcdnl]

Ya - I don't like how he did that implementation. I would do something more like context or something like this: https://github.com/streamich/react-use/blob/master/docs/createGlobalState.md

[JohannesKlauss]

@amcdnl Regarding #273 we have to come up with some kind of api that returns the values.

I was thinking about something like this:

const [hotkeysRef, getRegisteredHotkeys] = useHotkeys(....); but I am not sure if it wouldn't be better to have an object returning. Thing is the naming of the return objects, I am not quite sure about them.
Have you some thoughts on that?

[amcdnl]

I think the thats a fine api.

[JohannesKlauss]

The what?

[JohannesKlauss]

I changed my mind on this.
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.

But retrieving all registered hotkeys will be a different hook, since its more of a meta information.

@amcdnl What do you want to retrieve? Just the registered keys? Because the actual textual information what it does isn't saved currently. Would you use the hotkeys scopes for that?

[amcdnl]

So with:

const [hotkeysRef, getRegisteredHotkeys] = useHotkeys(....);

I would expect getRegisteredHotkeys to return all the hotkeys that are in the current state of the document. Might be helpful to return in that object the context of what they are attached to but probably not deal breaker.

[JohannesKlauss]

Hmh...
I was thinking about something like a useRegisteredHotkeys hook that just gives you all registered hotkeys. Not quite sure how we could save the context. Do you mean the ref that they are attached to?

[JohannesKlauss]

I also stumbled across another edge case.

What about multiple assigned hotkeys?
If an app for example has multiple hotkeys ctrl+m in different contexts, how should we return that?