一个React的键盘快捷键库

AugustusWalter 发布于20天前
0 条问题

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

查看原文: A keyboard shortcut library for React

  • greenostrich
  • greenswan
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。