Electron Command Palette

A nice-looking command palette for Electron

Features

• Searchable
• Highly customizable *
• Show Title - Description - Shortcut and Category
• Register local shortcuts *
• Register custom actions on click *

* planned feature

Installation

$ npm install --save electron-command-palette

Usage

Mandatory

renderer.js :

const CmdPalette = require("electron-command-palette");
 
let palette = new CmdPalette();

Add commands

const cmds       = require("./commands.json");
 
//JSON style
palette.add(cmds);
 
//inline style
palette.add({
    "title": "New project",
    "category": "Project",
    "description": "Create a new project from scratch",
    "shortcut": "CmdOrCtrl+Shift+N",
    "action": "newproject"
})

commands.json :

[
  {
    "title": "New project",
    "category": "Project",
    "description": "Create a new project from scratch",
    "shortcut": "CmdOrCtrl+Shift+N",
    "action": "newproject"
  },
  {
      "title": "Title",
      "category": "Optional categoty",
      "description": "optional description",
      "shortcut": "Electron accelerator",
      "action": "Name of the function previously registered"
    }
]

Register functions

renderer.js:

const functions  = require("./functions");
 
//Module style
palette.register(functions);
 
//Inline style
palette.register("saveproject", function() {
    Project.save();
});

functions.js:

module.exports = [
    {
        "key"   : "newproject",
        "action": function () {
            console.log("Save project");
        }
    },
    {
        "key"   : "openproject",
        "action": function () {
            console.log("Open project");
        }
    }
];

Display

palette.show();
palette.hide();

TODO

• Tidy repo
• Register functions
• register shortcuts
• Trigger correct action on click
• Fix bad fuzzy search
• Customization options (position, CSS classes, themes)

Contributors

• Armaldio

License

MIT © Armaldio