TanStack - Hotkeys

'use client'

import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys'

type SaveShortcutProps = {
  onSave: () => void
}

export function SaveShortcut({ onSave }: SaveShortcutProps) {
  useHotkey('Mod+S', () => {
    onSave()
  })

  return (
    <button type="button" onClick={onSave}>
      Lưu <kbd>{formatForDisplay('Mod+S')}</kbd>
    </button>
  )
}

'use client'

import { useRef } from 'react'
import { useHotkey } from '@tanstack/react-hotkeys'

type CustomerPanelProps = {
  onClose: () => void
}

export function CustomerPanel({ onClose }: CustomerPanelProps) {
  const panelRef = useRef<HTMLDivElement>(null)

  useHotkey('Escape', onClose, {
    target: panelRef,
  })

  return (
    <div ref={panelRef} tabIndex={0}>
      <h2>Chi tiết khách hàng</h2>
      <p>Bấm Escape khi panel đang focus để đóng.</p>
    </div>
  )
}

'use client'

import { useHotkey } from '@tanstack/react-hotkeys'

type DeleteDialogProps = {
  open: boolean
  onConfirm: () => void
  onClose: () => void
}

export function DeleteDialog({ open, onConfirm, onClose }: DeleteDialogProps) {
  useHotkey('Enter', onConfirm, { enabled: open })
  useHotkey('Escape', onClose, { enabled: open })

  if (!open) {
    return null
  }

  return (
    <div role="dialog" aria-modal="true">
      <p>Bạn có chắc muốn xóa bản ghi này?</p>
      <button type="button" onClick={onConfirm}>
        Xóa
      </button>
      <button type="button" onClick={onClose}>
        Hủy
      </button>
    </div>
  )
}

'use client'

import { useHotkeySequence } from '@tanstack/react-hotkeys'

export function PageShortcuts() {
  useHotkeySequence(['G', 'G'], () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  })

  useHotkeySequence(['G', 'Shift+G'], () => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
  })

  return null
}

useHotkeySequence(['D', 'D'], deleteSelectedItem, {
  timeout: 500,
})

'use client'

import { formatForDisplay, useHotkeyRecorder } from '@tanstack/react-hotkeys'

type ShortcutRecorderProps = {
  onChange: (hotkey: string) => void
}

export function ShortcutRecorder({ onChange }: ShortcutRecorderProps) {
  const recorder = useHotkeyRecorder({
    onRecord: onChange,
  })

  return (
    <button
      type="button"
      onClick={recorder.isRecording ? recorder.stopRecording : recorder.startRecording}
    >
      {recorder.isRecording
        ? 'Bấm tổ hợp phím...'
        : recorder.recordedHotkey
          ? formatForDisplay(recorder.recordedHotkey)
          : 'Ghi shortcut'}
    </button>
  )
}

'use client'

import { useKeyHold } from '@tanstack/react-hotkeys'

type DeleteButtonProps = {
  onMoveToTrash: () => void
  onDeleteForever: () => void
}

export function DeleteButton({ onMoveToTrash, onDeleteForever }: DeleteButtonProps) {
  const isShiftHeld = useKeyHold('Shift')

  return (
    <button
      type="button"
      onClick={isShiftHeld ? onDeleteForever : onMoveToTrash}
    >
      {isShiftHeld ? 'Xóa vĩnh viễn' : 'Chuyển vào thùng rác'}
    </button>
  )
}

Thêm TanStack Hotkeys vào dự án Next.js hiện tại.
Tạo các shortcut sau:
- Mod+K mở command palette.
- Mod+S lưu form hiện tại.
- Escape đóng dialog đang mở.

Yêu cầu:
- Dùng @tanstack/react-hotkeys.
- Các hook phải nằm trong client component.
- Hiển thị shortcut bằng formatForDisplay.
- Không làm shortcut chạy khi đang nhập liệu nếu hành vi đó gây lỗi UX.