React Command Palette

An accessible browser compatible javascript command palette.

Live Playground

For examples of the command palette in action, go to the

Storybook

OR

To run that demo on your own computer:

Usage

Install it in your project

Please note, this package isn't ready yet for release on npm.

$ npm install --save https://github.com/asabaylus/react-command-palette.git

Import into your react app and pass commands

import CommandPalette from 'react-command-palette';

const commands = [{
    name: "Foo",
    command() {},
    section: "Command" // optional
  },{
    name: "Bar",
    command() {},
    section: "Command"
  }
  ... 
 ];
 
 ReactDOM.render(
  <CommandPalette commands={commands} />, 
  document.getElementById('app'))

Props

  • open a boolean, when set to true it forces the command palette to be displayed. Defaults to "false".

  • hotKeys a string that contains a keyboard shortcut for opening/closing the palette. Defaults to "cmd+shift+p". Uses mousetrap key combos

  • options controls how fuzzy search is configured see fusejs options

  • commands appears in the command palette. For each command in the array the object must have a name and a command. The name is a user friendly string that will be display to the user. The command is a function that will be executed when the user clicks or presses the enter key.

  • trigger a string or a React.ComponentType the opens the command palette when clicked. If a custom trigger is not set then by default a button will be used. If a custom component or string is provided then it will automatically be wrapped inside an accessible div that will allow it be keyboard accessible, clickable and focusable for assistive technologies.

    Example with a component:

    // jsx trigger prop
<CommandPalette commands={data} trigger={<b>Click Me!</b>}>

// html generated trigger
<div role="button" tabindex="0"><b>Click Me!</b></div>

    Example with a string:

    // jsx trigger prop
<CommandPalette commands={data} trigger="Click Me!">

// html generated trigger
<div role="button" tabindex="0">Click Me!</div>

    When the trigger is clicked it will open the command palette, no custom handlers or events are required.

Developer Setup

# install dependencies
$ npm install

# run lint
$ npm run lint

# beautify code
$ npm run prettier

# run unit tests
$ npm test

# start the dev environment
$ npm run dev

# update the docs
$ npm run build-storybook

GitHub