Command

An inline, searchable list of commands.

CommandProps packages/core/src/popups.ts:601 ↗

Import

import { Command } from "@tarve/core";

Usage

Command.tsx

import { Command } from "@tarve/core";

let query = "";

<Command
  id="commands"
  query={query}
  items={[
    { value: "new", label: "New file", icon: "plus", shortcut: "Ctrl+N", group: "File" },
    { value: "settings", label: "Open settings", icon: "settings", group: "App" },
  ]}
  onQueryChange={(next) => {
    query = next;
  }}
  onSelect={(value) => console.log(value)}
/>

Props

Prop	Type	Default
`id` required	`string`	—
`items` required	`readonly CommandItem[]`	—
`query` required	`string`	—
`emptyText`	`string`	`"No results found."`
`onEscape`	`() => void`	—
`onQueryChange`	`(query: string) => void`	—
`onSelect`	`(value: string) => void`	—
`onValueChange`	`(value: string) => void`	—
`placeholder`	`string`	`"Type a command or search..."`
`value`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

CommandItem

interface CommandItem {
  value: string;
  label: string;
  keywords?: readonly string[];
  icon?: IconName;
  group?: string;
  shortcut?: string;
  disabled?: boolean;
}