每日前端宝藏库 | tinykeys ✨

🌟 500 字节的键盘灵魂，让用户体验起飞！ 🚀💨
💡 “不是所有快捷键都叫 tinykeys。”
🔥 体积仅 500 字节（gzip），却能让你的应用瞬间拥有专业级键盘体验！

---

🎯 一句话介绍
tinykeys 是一个超轻量级 JavaScript 键盘快捷键库 🪶⚡，API 简洁到像呼吸一样自然，支持组合键、顺序键、自动平台适配，让你轻松实现 Cmd+K 搜索、Esc 关闭、? 帮助提示等高级交互！

💬 “它不是快捷键库，它是用户体验的加速器。” —— 来自无数开发者的真实反馈 ✅

---

🧰 为什么你需要它？

传统痛点 ❌	tinykeys 解法 ✅
手动监听 keydown 太繁琐	声明式语法，一键绑定 🎯
判断 event.metaKey / ctrlKey 太麻烦	自动识别 Mac/Windows 平台 🔁
快捷键逻辑散落各处	集中式管理，清晰可维护 🧩
体积大、依赖多	零依赖，仅 500B，比一张表情包还小 📦
不支持顺序快捷键（如 g i）	支持多段组合，灵活强大 ⌨️

---

🚀 快速上手：3 步起飞！

Step 1️⃣：安装它！

npm install tinykeys

或使用 CDN（推荐开发测试）：

<script type="module">
  import {
     
      tinykeys } from 'https://unpkg.com/tinykeys'
</script>

---

Step 2️⃣：引入并使用！

import {
   
    tinykeys } from "tinykeys"

// 绑定全局快捷键
const unsubscribe = tinykeys(window, {
   
   
  // 打开搜索框
  "Cmd+K": () => openSearch(),

  // 保存文档
  "Ctrl+S": (e) => {
   
   
    e.preventDefault()
    saveDocument()
  },

  // 关闭弹窗
  Escape: () => closeModal(),

  // 顺序快捷键：先按 g，再按 i
  "g i": () => goToInbox()
})

✅ 返回 unsubscribe() 函数，组件销毁时调用即可清理事件！

---

Step 3️⃣：在 React 中优雅封装 🎭

import { useEffect } from "react"
import { tinykeys } from "tin