Fast Portable Extensible CMD+k Component For React – kbar

Description:

kbar is a simple plug-n-play React component to add a fast, portable, and extensible COMMAND+k (CTRL+K) interface to your site.

Features:

• Built in animations and fully customizable components
• Keyboard navigation support; e.g. ctrl n / ctrl p for the navigation wizards
• Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t for Twitter
• Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to the previous action
• A simple data structure which enables anyone to easily build their own custom components

How to use it:

1. Install and import the kbar component.

# NPM
$ npm i kbar

import { KBarProvider } from "kbar";

2. Add the <KBarProvider> component to the app.

return (
  <KBarProvider actions={actions}>
    <App />
  </KBarProvider>
);

3. Add your own actions to the CMD+k interface.

const actions = [
  {
    id: "action1",
    name: "Action 1",
    shortcut: ["A"],
    keywords: "Action 1 Keyword",
    perform: () => (...),
  },
  {
    id: "action2",
    name: "Action 2",
    shortcut: ["B"],
    keywords: "Action 2 Keyword",
    perform: () => (...),
  },
  // ...
];

Preview: