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.

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

function MyComponent(props: {}) { return / handle / } /> / handle / } /> / handle / } /> ; }`

`Components`

Two components are provided. Keyboardis a wrapper for one or moreKeyComboelements and a single other element that is the target of the keyboard shortcuts.

`$3`

Renders a

containing the single non-KeyCombo` child.
Does not support any additional props.

$3

Specifies a keyboard shortcut. The following props are supported:

c: A string specifying the key combo.
onPress(e: KeyboardEvent): A function that is invoked when the key combo is pressed by the user.
global: 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.
preventDefault: A boolean indicating whether e.preventDefault() is
invoked automatically (default: true).

License

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