A command palette for React

A package with components for building your dream command palette for your web application.

Watch the YouTube demo or try it out here to get started.

• Features
• Installation
• Example usage
  • Opening the command palette
• API
• Utils
• Maintainers

Features

✓ Accessible
✓ Flexible
✓ Good looking
✓ Very fast
✓ Dark & light mode

Installation

npm install react-cmdk

Or if you'd rather use Yarn

yarn add react-cmdk

Example usage

You can compose your command palette pretty much however you like with the included components. But here is an example of a command palette that uses some of the included helpers for a very neat solution.

1import "react-cmdk/dist/cmdk.css";
2import CommandPalette, { filterItems, getItemIndex } from "react-cmdk";
3import { useState } from "react";
4
5const Example = () => {
6  const [page, setPage] = useState<"root" | "projects">("root");
7  const [open, setOpen] = useState<boolean>(true);
8  const [search, setSearch] = useState("");
9
10  const filteredItems = filterItems(
11    [
12      {
13        heading: "Home",
14        id: "home",
15        items: [
16          {
17            id: "home",
18            children: "Home",
19            icon: "HomeIcon",
20            href: "#",
21          },
22          {
23            id: "settings",
24            children: "Settings",
25            icon: "CogIcon",
26            href: "#",
27          },
28          {
29            id: "projects",
30            children: "Projects",
31            icon: "RectangleStackIcon",
32            closeOnSelect: false,
33            onClick: () => {
34              setPage("projects");
35            },
36          },
37        ],
38      },
39      {
40        heading: "Other",
41        id: "advanced",
42        items: [
43          {
44            id: "developer-settings",
45            children: "Developer settings",
46            icon: "CodeBracketIcon",
47            href: "#",
48          },
49          {
50            id: "privacy-policy",
51            children: "Privacy policy",
52            icon: "LifebuoyIcon",
53            href: "#",
54          },
55          {
56            id: "log-out",
57            children: "Log out",
58            icon: "ArrowRightOnRectangleIcon",
59            onClick: () => {
60              alert("Logging out...");
61            },
62          },
63        ],
64      },
65    ],
66    search
67  );
68
69  return (
70    <CommandPalette
71      onChangeSearch={setSearch}
72      onChangeOpen={setOpen}
73      search={search}
74      isOpen={open}
75      page={page}
76    >
77      <CommandPalette.Page id="root">
78        {filteredItems.length ? (
79          filteredItems.map((list) => (
80            <CommandPalette.List key={list.id} heading={list.heading}>
81              {list.items.map(({ id, ...rest }) => (
82                <CommandPalette.ListItem
83                  key={id}
84                  index={getItemIndex(filteredItems, id)}
85                  {...rest}
86                />
87              ))}
88            </CommandPalette.List>
89          ))
90        ) : (
91          <CommandPalette.FreeSearchAction />
92        )}
93      </CommandPalette.Page>
94
95      <CommandPalette.Page id="projects">
96        {/* Projects page */}
97      </CommandPalette.Page>
98    </CommandPalette>
99  );
100};
101
102export default Example;

Opening the command palette

The package does include a helper hook for opening the command palette, but you can actually open it however you want. Here are some examples.

Helper

1const [isOpen, setIsOpen] = useState<boolean>(false);
2
3useHandleOpenCommandPalette(setIsOpen);

Custom

1const [isOpen, setIsOpen] = useState<boolean>(false);
2
3useEffect(() => {
4  function handleKeyDown(e: KeyboardEvent) {
5    if (
6      (navigator?.platform?.toLowerCase().includes("mac")
7        ? e.metaKey
8        : e.ctrlKey) &&
9      e.key === "k"
10    ) {
11      e.preventDefault();
12      e.stopPropagation();
13
14      setIsOpen((currentValue) => {
15        return !currentValue;
16      });
17    }
18  }
19
20  document.addEventListener("keydown", handleKeyDown);
21
22  return () => {
23    document.removeEventListener("keydown", handleKeyDown);
24  };
25}, []);

API

CommandPalette

name	type	required	default	description
onChangeSearch	(value: string) => void	true		Function for setting search value
onChangeOpen	(value: boolean) => void	true		Function for setting open state
children	React.ReactNode	true		Children of command palette
isOpen	boolean	true		Open state
search	string	true		Search state
placeholder	string	false	"Search"	Search field placeholder
page	string	false		The current page id
renderLink	RenderLink	false		Function for customizing rendering of links
footer	React.ReactNode	false		Footer component
selected	number	false		The current selected item index
onChangeSelected	(value: number) => void	false		Function for setting selected item index

CommandPalette.Page

FYI. Using pages is completely optional

name	type	required	default	description
id	string	true		A unique page id
children	React.ReactNode	true		Children of the list
searchPrefix	string[]	false		Prefix to the left of the search bar
onEscape	() => void	false		Function that runs upon clicking escape

CommandPalette.List

name	type	required	default	description
children	React.ReactNode	true		Children of the list
heading	string	false		Heading of the list

CommandPalette.ListItem

name	type	required	default	description
index	number	true		Index for list item
closeOnSelect	boolean	false		Whether to close the command palette upon click
icon	(IconName, React.FC)	false	false	Icon for list item
iconType	IconType	false	"solid"	Icon for list item
showType	boolean	false	true	Whether to show the item type
disabled	boolean	false		Whether the item is disabled
keywords	Array	false		Underlying search keywords for the list item

The list item also extends the HTMLAnchorElement & HTMLButtonElement types

CommandPalette.FreeSearchAction

name	type	required	default	description
index	number	false	0	Index for list item
label	string	false	"Search for"	Button label

The search action also extends the HTMLAnchorElement & HTMLButtonElement types

RenderLink

1(
2  props: DetailedHTMLProps<
3    AnchorHTMLAttributes<HTMLAnchorElement>,
4    HTMLAnchorElement
5  >
6) => ReactNode;

JsonStructure

Array of

name	type	required	default	description
id	string	true		Id for list
items	Array<JsonStructureItem>	true		Items for list
heading	string	false		Heading for list

JsonStructureItem

CommandPalette.ListItem

Omits index & extends

name	type	required	default	description
id	string	true		Id for list item

Utils

getItemIndex

A function for getting the current index of a item within the json structure

1(items: JsonStructure, listItemId: string, startIndex = 0) => number;

filterItems

A function for filtering the json structure from a search string

1(
2  items: JsonStructure,
3  search: string,
4  options?: { filterOnListHeading: boolean }
5) => JsonStructure;

renderJsonStructure

A function for rendering a json structure

1(items: JsonStructure) => JSX.Element[]

useHandleOpenCommandPalette

1(fn: React.Dispatch<React.SetStateAction<boolean>>) => void

Maintainers