Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Bind to keyboard shortcuts in React.

Topics

Resources

License

Packages

No packages published