React support for @reasonink/clack

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

Installation

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.

Usage

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 />
    </Keyboard>;
}

Components

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.

Keyboard

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

KeyCombo

Specifies a keyboard shortcut. The following props are supported:

License

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