Menu

React Command Palette: Cmd+K, Nested Pages and Mobile
📰

React Command Palette: Cmd+K, Nested Pages and Mobile

DEV Community: react·Serban Dan Rusu·about 8 hours ago
#alixapHo
#devtoreact#devto#dev#command#menu
Reading 0:00
15s threshold

TL;DR

A React command palette should bind one mod+K shortcut that reads ⌘K on Apple devices and Ctrl+K elsewhere, keep nested pages as a stack that Backspace and Escape pop, debounce and abort server searches, and store recents by item id. Phones have no Cmd key, so it also needs a visible search button that opens a full-height sheet with the keyboard already up and 16px input text. Wingo UI's Command Menu (Pro) does all of this on top of cmdk; the Kbd and useShortcut pieces it uses are free.

A React command palette is a search box in a dialog that lets people jump to a page, run an action or find a client without reaching for the mouse. With cmdk the first version is short. The details take longer: the hint has to read ⌘K on a Mac and Ctrl+K on Windows, "Theme…" should open a second page that Backspace closes, server results should arrive without flicker, recent picks should come first, and on a phone the whole thing should become a full-height sheet with the keyboard up.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.