Skip to content

Latest commit

 

History

History
87 lines (71 loc) · 3.56 KB

sampleChromeTheme.md

File metadata and controls

87 lines (71 loc) · 3.56 KB
Raw

Building a Chrome inspired Command Palette

A Chrome theme is available in the the themes directory. There are four base components that need to be styled, trigger, spinner, react-modal and react-autosuggest components. All four can be styled at once via the theme prop.

For a complete example see this CodeSandbox

The simplest way to get started is to import the Chrome theme and CSS from the examples directory as follows:

import React from "react";
import { createRoot } from 'react-dom/client';
import CommandPalette from "react-command-palette";

// import the theme from those provided ...
import chrome from "./node_modules/react-command-palette/dist/themes/chrome-theme";

// then import the CSS
import "./node_modules/react-command-palette/dist/themes/chrome.css";

Alternatively to custom style the CommandPalette you'll need a CSS file with rules that map to your theme props' key/value pairs, ex:

// map CSS class names to CommandPalette components
const chrome = {
  modal:                      "chrome-modal",
  overlay:                    "chrome-overlay",
  container:                  "chrome-container",
  content:                    "chrome-content",
  containerOpen:              "chrome-containerOpen",
  input:                      "chrome-input",
  inputOpen:                  "chrome-inputOpen",
  inputFocused:               "chrome-inputFocused",
  spinner:                    "chrome-spinner",
  suggestionsContainer:       "chrome-suggestionsContainer",
  suggestionsContainerOpen:   "chrome-suggestionsContainerOpen",
  suggestionsList:            "chrome-suggestionsList",
  suggestion:                 "chrome-suggestion",
  suggestionFirst:            "chrome-suggestionFirst",
  suggestionHighlighted:      "chrome-suggestionHighlighted",
  trigger:                    "chrome-trigger"
}

The layout for each of the commands that appears in the command list can also be customized. For instance, Chrome dev tools command palette has a list of commands that includes a category, command and associated keyboard shortcut when applicable. Because the default command is limited to just displaying the command's name you'll need to make your own renderCommand like the component included in sampleChromeCommand.js.

The sampleChromeCommands.css file must be imported into the renderCommand component. Of coure you can use your imagination to create any layout you like for each command. Note that suggestion.highlight will contain the raw HTML of the matching value.

import React from "react";
import "./sampleChromeCommand.css";

export default function sampleChromeCommand(suggestion) {
  const { name, highlight, category, shortcut } = suggestion;
  return (
    <div className="chrome-suggestion">
      <span className={`chrome-category ${category}`}>{category}</span>
      {highlight ? (
        <span dangerouslySetInnerHTML={{ __html: highlight }} />
      ) : (
        <span>{name}</span>
      )}
      <kbd className="chrome-shortcut">{shortcut}</kbd>
    </div>
  );
}


const commands = [{
    id: 1,
    shortcut: '⌘ Esc',
    name: "Close pannel",
    command() {
        // do something
    }
} ...];

const container = document.getElementById('app');
const root = createRoot(container);
root.render(
    <CommandPalette theme={chrome} 
        commands={commands} 
        renderCommand={sampleChromeCommand} />, 
    document.getElementById('root')
)