‏react-hotkeys-hook: میانبرهای کیبورد در ری‌اکت

اگه تا حالا خواستی توی یه اپ ری‌اکت میانبر کیبورد اضافه کنی، احتمالاً با یه سری راه‌حل‌های پیچیده و پر از boilerplate روبرو شدی. react-hotkeys-hook اومده این مشکل رو حل کنه — یه کتابخونه‌ای که کل ماجرا رو با یه hook ساده جمع می‌کنه.

ساده‌ترین شکل استفاده اینه که یه کلید یا ترکیب کلید تعریف می‌کنی و یه callback بهش می‌دی. مثلاً برای ذخیره‌سازی با Ctrl+S:

useHotkeys('ctrl+s', () => {
  saveDocument()
})

یکی از نکات جالب این کتابخونه اینه که می‌تونی میانبرها رو به یه المان خاص محدود کنی. با استفاده از ref، shortcut فقط وقتی اون المان focus داشته باشه فعال می‌شه. این برای ادیتورها، مودال‌ها یا layoutهای چندپنله‌ای خیلی کاربردیه:

function Editor() {
  const ref = useHotkeys('ctrl+b', () => toggleBold())
  return <div ref={ref} tabIndex={-1}>Click here to focus, then press ctrl+b</div>
}

react-hotkeys-hook از ترکیب‌های پیچیده modifier هم پشتیبانی می‌کنه و حتی می‌تونی دنباله‌های چندکلیدی به سبک vim تعریف کنی. مثلاً g>i>t یعنی کاربر باید g، بعد i، بعد t رو پشت سر هم بزنه:

// Modifier combinations
useHotkeys('ctrl+shift+k', () => deleteLine())

// Sequential hotkeys (vim-style)
useHotkeys('g>i>t', () => goToInbox())

یه قابلیت خوب دیگه‌اش hook مجزایی به اسم useRecordHotkeysه که بهت اجازه می‌ده کاربر خودش میانبر دلخواهش رو ثبت کنه. این برای صفحات تنظیمات یا اپ‌هایی که می‌خوان قابلیت شخصی‌سازی بدن خیلی مفیده:

function HotkeyRecorder() {
  const [keys, { start, stop, isRecording }] = useRecordHotkeys()
  return (
    <div>
      <button onPointerDown={start} onPointerUp={stop}>
        {isRecording ? 'Recording...' : 'Record'}
      </button>
      <p>Recorded: {Array.from(keys).join(' + ')}</p>
    </div>
  )
}

در کل react-hotkeys-hook یه انتخاب خوبه وقتی می‌خوای تجربه کاربری اپت رو با keyboard shortcut حرفه‌ای‌تر کنی، بدون اینکه کدت رو پیچیده کنی.

نکات کلیدی:

• میانبر کیبورد با یه hook ساده، بدون Provider یا Context
• امکان محدود کردن shortcut به یه المان خاص از طریق ref
• پشتیبانی از ترکیب‌های modifier مثل ctrl+shift+k
• پشتیبانی از دنباله‌های چندکلیدی به سبک vim
• hook مجزا برای ضبط میانبر دلخواه توسط کاربر (useRecordHotkeys)