useKeyboardShortcut

Hook

Binds a keyboard shortcut with modifier key support (Ctrl, Meta, Shift, Alt).

npx arupui add use-keyboard-shortcut

Usage

use-keyboard-shortcut.tsx
import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut"

function SearchDialog() {
  const [open, setOpen] = useState(false)

  useKeyboardShortcut(
    { key: "k", meta: true },
    () => setOpen(true)
  )

  return open ? <CommandPalette /> : null
}

Parameters

options{ key, ctrl?, meta?, shift?, alt? }

Shortcut config

callback(event: KeyboardEvent) => void

Handler function

Returns

void
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light