Command Palette React

A Command Palette React Component

Installation

npm install command-palette-react

or

yarn add command-palette-react

Usage

Basic command palette

import React from 'react'
import CommandPaletteReact from 'command-palette-react'

export MyReactComponent = (props) => {

  // Manage the command palette visibility outside of the component.
  // This allows for greater flexibility and less needless rendering.
  // This way the command palette can be set to show on keyboard events, button presses, etc.
  const [showCommandPalette, setShowCommandPalette] = useState(false)
  if (!showCommandPalette) return null;
  
  const someAction = () => {
    // do something if 'Test Result' is chosen
  }
  
  const someOtherAction = () => {
    // do something if 'Another result' is chosen
  }
  
  return {
    <CommandPaletteReact
    
      // This text is rendered as placeholder text in the search input
      placeholder="Type a command here"
      
      // This is the searchable data. Search is based on caption text
      data={
        [{
          caption: 'Test Result',
          callback: () => someAction()
        },{
          caption: 'Another result',
          callback: () => someOtherAction()
        }]
      }
      
      // This will get called when a result is chosen or if the Escape key is pressed
      hideCommandPalette={ () => setShowCommandPalette(false) }
      theme={ {darkMode: true} }
    />
  }
}

To do

• Custom shortcuts
• Better theme/styling system
• Test coverage

Contributing

Changes are welcome. Please use typescript and ts-lint.