@ bigbinary/ neto- hotkeys (英语)

这个 neeto-hotkeys 软件包提供 useHotKeys 钩子,多功能工具 用于管理应用程序中的热键。 此勾钩允许您定义特定 hotkey组合并与之关联到相应的处理器功能. 这个 按下所配置的热键时会引用相关处理器, 启用 来执行响应键盘输入的动作.

安装

yarn add @bigbinary/neeto-hotkeys

认为 useHotKeys 钩子接受 :

• hotkey: 指定要收听的热键的字符串 。 热键可以是 以三种格式定义: sequential, (中文(简体) ), simultaneous 打开 single。 。 。 .

  1. 序列:由空格分隔出的任何密钥都被认为是相继的. 这个 当用户按顺序按下密钥时,会引用处理器。 对于 实例, s r 表示当用户按 s 随后是 r 页:1 相应 handler 将被援引.
  2. 同时:同步热键要求所有指定的键是 同时按下以触发处理器. 譬如说, command+shift+r 意思是当 command, (中文(简体) ), shift, (中文(简体) ), r 正在按下时间 同时,将援引处理器.
  3. 单身: 如名称所示,这意味着单键,如 r , (中文(简体) ), k, (中文(简体) ), return 包括: 无论何时 r 按下它相应的处理器 电话.

  热键应该使用 MacOS 格式, 钩子会处理转换 到用户平台(例如:命令 - > ctrl for windows).

  如果我们想把多把热键绑在同一个处理器上 我们可以用一个 像这样的阵列 useHotkeys(['a', 'b'], handler)。 。 。 .

• handler:按下热键时应当引用的函数.

  Handler 会收到原始密钥 event。这可以用来阻止 这样的默认浏览器动作 event.preventDefault()。 。 。 .

• config: 具有3个属性的配置对象 mode, (中文(简体) ), unbindOnUnmount 打开 enabled。 。 。 .

  1. 模式 : 模式可用值为 default, (中文(简体) ), global 打开 scoped。 。 。 .
     • 默认: 这是默认模式 。 只有在 用户在文本区域、输入或选择元素之外.
     • 环球: 即使用户在内部形式元素中, 处理器也会被发射 像文本区.
     • 范围:用于范围化热键到DOM元素。 你用得着 如果您想要引用处理器, 只有在用户是 聚焦于特定 div, (中文(简体) ), button, (中文(简体) ), textarea 诸如来. 当这个 模式将设置钩子返回 a ref,你需要附加这个 ref 以到您需要瞄准热键的元素.
  2. 取消对 UnbidOnUnmount : 默认值为 true。如果你不想要一个 当某个组件被卸载时, 处理器将未注册, 然后设置 值为 false。 。 。 .
  3. 启用:默认其值为 true。设定为 false 将 不注册热键.
  4. 文档:这是可选属性。 如果你想听热闹 在外部文档(例如iframe)上,通过该引用 文档使用 document 属性 config 对象。 如果你这样做 不提供此属性, 钩子会听取当前热键 默认文档.

返回值:

• inputRef页:1 ref 需要附加在输入元素上的 听从.

用法 :

以下说明使用 useHotKeys 连接执行快捷键 为侧边栏打开.

import useHotKeys from "@bigbinary/neeto-hotkeys";

// openSidebar function will only be called if the user is focused inside the textarea and performs the key combination.
const ref = useHotKeys("command+shift+r", openSidebar, {
  mode: "scoped",
});

return (
  <div>
    <div>Hello world</div>
    <textarea ref={ref}></textarea>
  </div>
);

Hotkey是许多应用程序的一个基本方面,提高了用户效率 和互动。 用HotKeys钩简化了这些工具的执行 通过允许您指定不同格式的热键组合, 相关处理器,和配置选项.