Bind to keyboard shortcuts in React.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
LICENSE
README.md
nwb.config.js
package.json
yarn.lock

README.md

react-combokeys Build Status npm version

Greenkeeper badge

Bind to keyboard shortcuts in React.

NOTE: This React component library wraps combokeys which is a fork of mousetrap. combokeys handles the capturing of keyboard shortcuts/combos/keypresses.

Install

$ yarn add react-combokeys
# npm v5+
$ npm install react-combokeys
# before npm v5
$ npm install --save react-combokeys

Usage

// 3rd-party imports

import ReactDOM from "react-dom";
import React, { Component } from "react";

import ComboKeys from "react-combokeys";

// function as child component

ReactDOM.render(
    <ComboKeys bind={["a", "command+shift+k"]} keyup="b" keydown="c">
        {({ combo }) => {
            return <div>{`Combo: ${combo || "none yet"}`}</div>;
        }}
    </ComboKeys>,
    mountNode
);

// render prop

const render = ({ combo }) => {
    return <div>{`Combo: ${combo || "none yet"}`}</div>;
};

ReactDOM.render(
    <ComboKeys
        bind={["a", "command+shift+k"]}
        keyup="b"
        keydown="c"
        render={render}
    />,
    mountNode
);

Props

render (optional)

An optional function that is called whenever a keyboard shortcut/combo has been detected, or when internal state for tracking keyboard shortcut/combo has changed.

It's expected that render function returns a single React element. This has same API semantics as React.Component.render().

If render function is given, it has precedence over any given child component:

// TODO: add example

Function as child component (optional)

Same semantics as render prop function (see above).

If render function is not given, then the child component will be invoked as a function.

// TODO: add example

onCombo (optional)

An optional function that is called whenever a keyboard shortcut/combo has been detected.

The onCombo function is invoked with an object argument: ({ event, combo, action }).

Credits

Some parts of code (e.g. getRootProps()) were blatantly copied from: https://github.com/paypal/downshift

Kudos to @kentcdodds and his article here, for inspiring me to create this React component library using the ideas that he (and others) have preached.

License

MIT.