react-keyshortcut

react-keyshortcut

Keyboard Shortcuts Library, wrapper around keypress

tl;dr

• Install by executing npm install react-keyshortcut or yarn add react-keyshortcut.
• Import by adding import KeyboardShortcut from 'react-keyshortcut'.
• Use by adding <KeyboardShortcut />. Use combo, callback prop for register callback on combo key combination.
• To get All shortcuts Wrap root component with KeyboardShortcutProvider and use withShortcut HOC to get all shortcuts as prop shortcuts

Demo

A minimal demo page can be found in example directory.

Getting started

Compatibility

Your project needs to use React 16.3 or later.

Installation

Add react-keyshortcut to your project by executing npm install react-keyshortcut or yarn add react-keyshortcut.

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import KeyboardShortcut from 'react-keyshortcut';

function MyApp() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <KeyboardShortcut
        combo={"shift s"}
        callback={()=>setCount(count=>count+1)}
        value={value}
      />
    </div>
  );
}

Here's an example of using Multiple KeyboardShortcut:

import React, { useState } from 'react';
import KeyboardShortcut from 'react-keyshortcut';

function MyApp() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <KeyboardShortcut
        combo={"shift +"}
        callback={()=>setCount(count=>count+1)}
        value={value}
      />
      <KeyboardShortcut
        combo={"shift -"}
        callback={()=>setCount(count=>count-1)}
        value={value}
      />
    </div>
  );
}

Here's an example of using KeyboardShortcutProvider and withShortcut:

// App.js
import {KeyboardShortcutProvider} from 'react-keyshortcut';
import ComponentA from './pathof/ComponentA';
import ActiveShortcuts from './pathof/ActiveShortcuts';

function App() {
  const [count, setCount] = useState(0);

  return (
    <KeyboardShortcutProvider>
     <ComponentA />
     <ActiveShortcuts/>
    </KeyboardShortcutProvider>
  );
}
export default MyApp

// ComponentA.js
import React, { useState } from 'react';
import KeyboardShortcut from 'react-keyshortcut';

function ComponentA() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <KeyboardShortcut
        combo={"shift +"}
        callback={()=>setCount(count=>count+1)}
        value={value}
      />
      <KeyboardShortcut
        combo={"shift -"}
        callback={()=>setCount(count=>count-1)}
        value={value}
      />
    </div>
  );
}
export default ComponentA

// ActiveShortcuts.js
import React, { useState } from 'react';
import {withShortcut} from 'react-keyshortcut';

function ActiveShortcuts({shortcuts=[]}) {
  
  return (
    <div>
      <p>shortcuts</p>
      {shortcuts && shortcuts.map((shortcut,index)=><p key={index}>{shortcut.combo}:{shortcut.description}</p>)}
    </div>
  );
}
export default withShortcut(ActiveShortcuts);

Check the example directory in this repository for a full working example.

Props

Prop name	Description	Default value	Example values
combo	space separated string or an array of strings of key names that describe your combo		"shift a"
callback	callback function executed when combo key is pressed	()=>{}	()=>setCount(count=>count+1)
description	string to describe the use of combo	''	shift a: reset background color

Useful links

• Keypress

License

The MIT License.

Author

Shubham Jha [e-mail] https://whoamishubham.github.io

Thank you