@dhruvilshah191999/使用简写
微小的零依赖性 键盘快捷键重置钩. 跨站台, TypeScript- first, ~1KB gzipped.
▶ 现场演示 ——在浏览器中尝试每个功能(来源) (中文(简体) ).
安装
npm install @dhruvilshah191999/use-shortcut
pnpm add @dhruvilshah191999/use-shortcut
yarn add @dhruvilshah191999/use-shortcut
bun add @dhruvilshah191999/use-shortcut
使用量
import { useShortcut } from "@dhruvilshah191999/use-shortcut";
useShortcut("mod+k", () => setOpen(true));
为什么是这个钩子?
- 零依赖关系
- 小声 (~ 1KB 叮当)
- 跨平台出框数字 :
mod成为 Mac 上的 Cmd, Ctrl 的别处 - 智能输入字段处理:快捷键在打字时不会起火(但
Escape(中文(简体) ) - 构造的脚本类型
- 总是重新调用: 无 stale 关闭, 无
useCallback需求
API 密码
useShortcut(key, callback, options?)
| 参数 | 类型 | 说明 |
|---|---|---|
key | string | string[] | 一个组合像 "mod+k",或将组合组合图映射到一个动作. |
callback | (e: KeyboardEvent) => void | 以匹配事件调用 。 总是最新的参考文献. |
options | Options | 可选的 见下文. |
Combo语法是大小写不敏感和白色空间容忍: "Cmd+K", (中文(简体) ), "cmd+k",以及 " cmd + k " 等同起来。 支持的修改名: mod, (中文(简体) ), cmd编号 :command, (中文(简体) ), ctrl编号 :control, (中文(简体) ), alt编号 :option, (中文(简体) ), shift, (中文(简体) ), meta。 。 。 .
选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
enabled | boolean | true | 快捷键是否活动 . |
preventDefault | boolean | false | 打电话 event.preventDefault() 在比赛中. |
stopPropagation | boolean | false | 打电话 event.stopPropagation() 在比赛中. |
enableInInputs | boolean | false | 在输入/ 文本区域/ 选择/ 内容可选时, 点火 . |
target | RefObject<HTMLElement> | Window | window | 随附听者所出之处. 对一个元素的快捷键使用反射. |
scope | string | string[] | —— 说 | 将快捷键限制为命名范围; 仅在一个活动时开火 。 见 范围。 。 。 . |
实例
基础
// Cmd+K (Mac) / Ctrl+K (Windows/Linux) to open search
useShortcut("mod+k", () => openSearch());
跨平台
// `mod` resolves to Cmd on Mac and Ctrl everywhere else
useShortcut("mod+s", () => save());
同一动作的多个快捷键
useShortcut(["mod+k", "/"], () => openSearch());
在逃逸时关闭模式
useShortcut("escape", () => setOpen(false), { enabled: isOpen });
防止默认浏览器行为
// Stop the browser's native "Save page" dialog
useShortcut("mod+s", () => save(), { preventDefault: true });
范围(可选)
默认每个快捷键都是 全球 只要组合吻合,就会开火 如果你需要的话
用于在应用程序的不同部分( 列表导航 vs. an) 中做不同事情的同一键
打开模式,例如,选择加入 范围: 标记快捷键 scope,将相关的
子树在 <ShortcutProvider>,并用 useShortcutScopes()。 。 。 .
快捷键 无 (单位:千美元) scope 范围纯粹是添加剂.
import {
ShortcutProvider,
useShortcut,
useShortcutScopes,
} from "@dhruvilshah191999/use-shortcut";
function App() {
// `list` is active on first render; `modal` is off until we open the modal
return (
<ShortcutProvider initialScopes={["list"]}>
<List />
<Modal />
</ShortcutProvider>
);
}
function List() {
// fires only while the "list" scope is active
useShortcut("j", selectNext, { scope: "list" });
return /* ... */;
}
function Modal() {
const { activate, deactivate } = useShortcutScopes();
function open() {
activate("modal"); // modal shortcuts start firing
deactivate("list"); // list shortcuts pause
}
// fires only while the "modal" scope is active
useShortcut("escape", close, { scope: "modal" });
return /* ... */;
}
useShortcutScopes() 返回时 { activeScopes, activate, deactivate, toggle, set }A级
快捷键可以属于多个范围( q){ scope: ["a", "b"] }和火,如果 任意 联 合 国
他们正在活动.
如果你使用一个
scope无<ShortcutProvider>,快捷键可降解为全局 行为和警告 一次在发展中.
洞穴
- 没有序列支持(例如,
g g) (中文(简体) ). - 范围通过
<ShortcutProvider>;没有一条,每个快捷键都是全球性的(你可以) 并且将单个快捷键缩小到带有target选项). - 没有优先/解决冲突——同一组合的全部火力都有多个处理器。 使用 瞄准门 处理者是活的.
当不使用时
如果需要键序列(例如, g g,帮助模式生成器,或密钥记录器UI,使用 反应- hotkeys- hook 或者说 TanStack 热键。 。 。 .
许可证
麻省理工学院