22

A keyboard shortcut library for React

 4 years ago
source link: https://github.com/reasonink/clack-react
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

React support for @reasonink/clack

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

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).

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK