Skip to content

Latest commit

 

History

History
83 lines (69 loc) · 3.49 KB

sampleAtomTheme.md

File metadata and controls

83 lines (69 loc) · 3.49 KB
Raw

Building an Atom inspired Command Palette

The easiest way to do this, is to do nothing because Atom is the default theme. However you may wish to tweak the theme to better meet your projects needs.

The CommandPalette comes with the Atom theme by default. There are four base components that need to be styled, the trigger, spinner, react-modal and react-autosuggest components. All three can be styled at once via the theme prop.

Try it on CodeSandbox

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

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

// map CSS class names to CommandPalette components
// Note that we dont need to do this for the Atom theme because its the default
// When not otherwise specified, the theme defaults to:
// const atom = {
//   modal:                      "atom-modal",
//   overlay:                    "atom-overlay",
//   container:                  "atom-container",
//   content:                    "atom-content",
//   containerOpen:              "atom-containerOpen",
//   input:                      "atom-input",
//   inputOpen:                  "atom-inputOpen",
//   inputFocused:               "atom-inputFocused",
//   spinner:                    "atom-spinner",
//   suggestionsContainer:       "atom-suggestionsContainer",
//   suggestionsContainerOpen:   "atom-suggestionsContainerOpen",
//   suggestionsList:            "atom-suggestionsList",
//   suggestion:                 "atom-suggestion",
//   suggestionFirst:            "atom-suggestionFirst",
//   suggestionHighlighted:      "atom-suggestionHighlighted",
//   trigger:                    "atom-trigger"
// }

// or use a theme from those provided ...
import atom from "./node_modules/react-command-palette/dist/themes/atom-theme";
import "./node_modules/react-command-palette/dist/themes/atom.css";

The layout for each of the commands that appears in the command list can also be customized. For instance, the Atom command palette has a list of commands that includes a 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 sampleAtomCommand.js.

The sampleAtomCommands.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 "./sampleAtomCommand.css";

function sampleAtomCommand(suggestion) {
  const { name, highlight, shortcut } = suggestion;
  return (
    <div className="atom-suggestion">
      {highlight ? (
        <span dangerouslySetInnerHTML={{ __html: highlight }} />
      ) : (
        <span>{name}</span>
      )}
      <kbd className="atom-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={atom} 
        commands={commands} 
        renderCommand={sampleAtomCommand} />, 
    document.getElementById('root')
)