react-key-shortcuts

This library is build over mousetrap. it gives you the ability to register all your shortcuts with action names in order to listen to this action name in any component.

Why to Use

This library gives you the capability to register all your shortcuts with names once across the system, So you can bind action on the name direct not the shortcut. also it gives you the capability to bind action on the specific shortcut in one component.

How to use

• wrap the app in 'index.js' with KeyShortcutprovider. (you can pass all shortcuts direct in the KeyShortcutProvider if you want)

import React from 'react';
import ReactDOM from 'react-dom';
import {KeyShortcutProvider} from 'react-key-shortcuts';
import App from './environment/App';

ReactDOM.render(
  <React.StrictMode>
    <KeyShortcutProvider>
      <App />
    </KeyShortcutProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

• Register shortcuts in App component

import React from 'react';
import {useRegisterShortcuts} from 'react-key-shortcuts';

import Test1 from './Test1';
import Test2 from './Test2';

const App = () => {
  useRegisterShortcuts({
    zoom: ['ctrl+z', 'ctrl+d'],
    open: 'ctrl+d',
  });
  return (
    <div>
      <Test1 />
      <Test2 />
    </div>
  );
};

export default App;

• Bind action in the components

//first component
import React from 'react';
import {useShortcutCallback} from 'react-key-shortcuts';

const Test1 = () => {
  useShortcutCallback('zoom', () => {
    console.log('test1 is zooming');
  });
  return (
    <div>
      press anyKey
    </div>
  );
};

export default Test1;

//second component
import React from 'react';
import {useShortcutCallback} from 'react-key-shortcuts';

const Test2 = () => {
  useShortcutCallback('zoom', () => {
    console.log('test2 is zooming');
  });
  useShortcutCallback('open', () => {
    console.log('Test2 is opening');
  });
  return (
    <div
      style={{
        display: 'inline-block',
        width: 300,
        height: 300,
        border: '1px solid green',
      }}
    />
  );
};

export default Test2;

API

Hook | Description | Syntax | Params ----|----|----|---- useRegisterShortcuts | used to register shortcut with name | useRegisterShortcuts(shortcuts)| shortcuts: object {shortcut,name}. shortcut accept the same input of shortcut in mousetrap useShortcutCallback | used to bind action to one of the shortcut name | useShortcutCallback(name,callback)| name is the register name for the shortcut useTriggerShortcut | used to trigger shortcut in order to simulate keyboard action programmatically | useTriggerShortcut(shortcutOrName) | shortcutOrName is wether an action name (zoom) or a real shortcut(ctrl+z) useShortcut | used to bind action to a specfic shortcut to deliver the default behaviour of mousetrap | useShortcut(shortcut,callback)| shortcut accept the same input of shortcut in mousetrap