Command Palette

@sushindustries/ui

Search over everything the host can name, in a native dialog: substring filter, arrow keys, and the host keeps the router.

6 min read
View as MarkdownEdit on GitHub

Props

PropTypeDefaultDoes
entriesreadonly PaletteEntry[]-Everything searchable. Matched by substring, and only the first twelve hits are shown.
openboolean-Drives showModal. Opening clears the query and puts the selection back on the first hit.
onClose() => void-Escape, the backdrop and the close event all arrive here. The host still owns open.
onSelect(entry: PaletteEntry) => void-Called with the chosen entry; the host owns navigation.
placeholder?string"Search"The only hint at what is searchable - nothing else labels the field.

Notes

entries should be a stable list - the component reads id for React's key and for aria-activedescendant, so two entries sharing an id collide silently and only one behaves correctly. Matching happens against title, hint and group together; an entry with a distinctive hint is reachable even when its title alone would not match what somebody typed.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content