solid-command-palette

Boost your users productivity by 10x 🚀

Some of the features offered by this library-

• Define actions with a simple config.
• Full keyboard support like open with CMD + K, navigate between actions using arrow keys.
• Fuzzy search between your actions on title, subtile, keywords.
• Bind custom keyboard shortcuts to your actions. They can be single letter, modifier combinations Shift + l or sequences g p.
• Enable actions based on dynamic conditions.
• Share your app state and methods to run any kind of functionality from actions.
• Full static type safety across the board.

Demo

Try the full demo on our documentation site.

Usage

Install the library

# Core Library
npm install solid-command-palette

# Peer Dependencies
npm install solid-transition-group tinykeys fuse.js

• solid-transition-group (1.6KB): provides advanced animation support. It's the official recommendation from SolidJS team so you might be using it already.
• tinykeys (700B): provides keyboard shortcut support. You can use this in your app for all kinds of keybindings.
• fuse.js (5KB): provides fuzzy search support to find relevant actions.

Integrate with app

// define actions in one module say `actions.ts`

import { defineAction } from 'solid-command-palette';

const minimalAction = defineAction({
  id: 'minimal',
  title: 'Minimal Action',
  run: () => {
    console.log('ran minimal action');
  },
});

const incrementCounterAction = defineAction({
  id: 'increment-counter',
  title: 'Increment Counter by 1',
  subtitle: 'Press CMD + E to trigger this.',
  shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows.
  run: ({ rootContext }) => {
    rootContext.increment();
  },
});

export const actions = {
  [minimalAction.id]: minimalAction,
  [incrementCounterAction.id]: incrementCounterAction,
};

// render inside top level Solid component

import { Root, CommandPalette } from 'solid-command-palette';
import { actions } from './actions';
import 'solid-command-palette/pkg-dist/style.css';

const App = () => {
  const actionsContext = {
    increment() {
      console.log('increment count state by 1');
    },
  };

  return (
    <div class="my-app">
      <Root actions={actions} actionsContext={actionsContext}>
        <CommandPalette />
      </Root>
    </div>
  );
};