CommandPalette

打った文字でコマンドを絞り込み、キーボードだけで実行するパレット

インポート

ts
import { CommandPalette } from '@k8ordo/ui';

使い方

label と keywords を大文字小文字を区別せずに絞り込みます。↓ / ↑ で移り（端で反対側へ回る）、Enter かクリックでパレットを閉じてから onSelect を呼びます。フォーカスは検索欄に置いたままです。同じ group の項目は見出しの下にまとまり、shortcut のキーは Kbd で添えます。

CommandK

New file⌘N
Open file⌘O
Toggle theme
tsx
const [isOpen, setIsOpen] = useState(false);

<CommandPalette
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  items={[
    {
      id: 'new-file',
      label: 'New file',
      group: 'File',
      shortcut: ['⌘', 'N'],
      onSelect: createFile,
    },
    {
      id: 'theme',
      label: 'Toggle theme',
      group: 'View',
      keywords: ['dark', 'light'],
      onSelect: toggleTheme,
    },
  ]}
/>

キーで開く

開閉は Modal と同じく isOpen / onClose で、⌘K / Ctrl+K のようなキーはアプリが配線します。閉じるとフォーカスは開く前の場所へ戻り、次に開いたときは空の検索から始まります。

tsx
useEffect(() => {
  const listener = (event: KeyboardEvent) => {
    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
      event.preventDefault();
      setIsOpen(true);
    }
  };
  document.addEventListener('keydown', listener);
  return () => {
    document.removeEventListener('keydown', listener);
  };
}, []);

Props

items
Type: readonly CommandPaletteItem[]
Default: -
aria-label?
Type: string
Default: -
defaultOpen?
Type: boolean
Default: -
isOpen?
Type: boolean
Default: -
onClose?
Type: () => void
Default: -
placeholder?
Type: string
Default: -
ref?
Type: Ref<HTMLDialogElement>
Default: -

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components