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

Files

Permalink
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
README.md 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

README.md

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:

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.

You can’t perform that action at this time.