Nitrogenous Polymorphic Molecule

    react-keyboard
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    Introduction

    react-keyboard is wrap of mousetrap.js in React, it offers keyboard shortcuts handling in React application.

    react-keyboard

    Getting started

    Install

    npm install react-keyboard

    Usage Example

    Defined keyMap

    const keyMap = {
      cmdK: {
        combo: 'command+k',
        eventType: 'keyup',
      },
      deleteNode: ['del', 'backspace'],
      left: 'left',
    }

    A KeyMap is an object which value is the key sequence. The key sequence can be:

    1. string which can be a single key left or combination of keys command+k
    2. array which is an array of multiple key commands: ['del', 'backspace']
    3. object only use an object if you need to listen to specific event type: {combo: 'command+k', eventType: 'keyup'}

    Use HotKeys Component

    import { HotKeys, Handlers } from 'react-keyboard'
    
    export class MyHotKeys extends React.Component {
    
      showDocumentation = () => {
        console.log('show doc')
      }
      deleteNode = () => {
        console.log('deleted')
      }
      moveLeft = () => {
        console.log('move left')
      }
      showChildDocumentation = () => {
        console.log('show child doc')
      }
    
      handlersParent = {
        cmdK: this.showDocumentation,
        deleteNode: this.deleteNode,
      }
    
      handlersChild = {
        cmdK: this.showChildDocumentation,
        left: this.moveLeft,
      }
    
      render() {
        return <HotKeys keyMap={keyMap} handlers={this.handlersParent}>
          <span>this is my hotkeys</span>
          <HotKeys handlers={this.handlersChild}>A child</HotKeys>
        </HotKeys>
      }
    }

    Note: Child HotKeys components can inherit keyMap from their parents. You don't necessarily define keyMap for each child if parents already have the shortcuts you need.

    Install

    npm i react-keyboard

    DownloadsWeekly Downloads

    42

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    35.5 kB

    Total Files

    24

    Last publish

    Collaborators

    • ruanyu1