Skip to content
React support for @reasonink/clack
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
src Initial commit Jan 29, 2020
.gitignore Initial commit Jan 29, 2020
.npmignore Initial commit Jan 29, 2020
LICENSE Added installation instructions and a note about the license to READM… Jan 30, 2020
package.json Bumped the package version to 0.0.2 Jan 30, 2020
tsconfig.json Initial commit Jan 29, 2020
yarn.lock Initial commit Jan 29, 2020

React support for @reasonink/clack

This package provides two React components that enable keyboard shortcuts in React.


Install with npm install @reasonink/clack-react or, if using yarn yarn add @reasonink/clack-react.

Older versions of npm require the --save flag in order to add the package to dependencies in your package.json.


In the following example we create a component MyComponent that wraps MyOtherComponent with three keyboard shortcuts. Whenever MyOtherComponent or any of its children are focused the three shortcuts will be enabled.

import { Keyboard, KeyCombo } from "@reasonink/clack-react";

function MyComponent(props: {}) {
    return <Keyboard>
        <KeyCombo c="ctrl + b" onPress={() => /* handle */ } />
        <KeyCombo c="ctrl + i" onPress={() => /* handle */ } />
        <KeyCombo c="ctrl + u" onPress={() => /* handle */ } />
        <MyOtherComponent />


Two components are provided. Keyboard is a wrapper for one or more KeyCombo elements and a single other element that is the target of the keyboard shortcuts.


Renders a <div class="keyboard"> containing the single non-KeyCombo child. Does not support any additional props.


Specifies a keyboard shortcut. The following props are supported:

A string specifying the key combo.
onPress(e: KeyboardEvent)
A function that is invoked when the key combo is pressed by the user.
A boolean specifying whether or not the key combo is global (default: false). A global shortcut is active even if the child of <Keyboard> is not focused.
A boolean indicating whether e.preventDefault() is invoked automatically (default: true).


This library is made available under the MIT license. See the LICENSE file for details.

You can’t perform that action at this time.