mreuter/link-to-key

Simply link an action to a keypress

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	string or Array<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