link-to-key

Simply link an action to a keypress.

Contents

• Contents
• Installation
• Usage
• Documentation
• License and Copyright

Installation

To install using npm:

npm install -P link-to-key

or using yarn:

yarn add link-to-key

Usage

I use the library primarily with react and to add a keyboard handler for accessibility:

// Create a clickable react component:
const Component = ({ onClick }) => (
  <div
    role="button"
    onClick={onClick}
  >
    Click me!
  </div>
);

Refactor it, to have better accessibility:

import linkToKey from 'link-to-key';

// Make component focusable and call onClick when ENTER is pressed.
const Component = ({ onClick }) => {
  const onKeyPress = linkToKey('Enter', onClick);
  return (
    <div
      role="button"
      tabIndex="0"
      onClick={onClick}
      onKeyPress={onKeyPress}
    >
      Click me!
    </div>
  );
};

Documentation

The library exports a single function as default. To use it just:

import linkToKey from 'link-to-key';

linkToKey

const onKeyPress = linkToKey(key, action);

| Parameter | type | Description | |--|-|-| | key | stringorArray<string> | The key that should trigger the action. It must be the same string that gets passed as key property of KeyboardEvent.If an array is passed, the action trigger on any of these keys. | | action | Function | The action that should be triggered. | | | | | Returns | Function | A function, that needs to be called with the event to check the key and trigger the action if appropriate. All excess parameters are passed to action. |

License and Copyright

MIT © Marc Reuter