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

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

Contributors

• Armaldio

License

MIT © Armaldio