plxity / solid-command-palette Goto Github PK

View Code? Open in Web Editor NEW

UI Library for Command Palette in SolidJS webapps

HTML 0.82% TypeScript 84.09% CSS 14.14% JavaScript 0.94%

solid-command-palette's Introduction

Solid Command Palette

If you want to increase productivity of your power users, adding a command palette is a great way to do that. 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+p) 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 demo on our documentation site.

Usage

Install the library

npm install solid-command-palette tinykeys fuse.js

tinykeys (400B) provides keyboard shortcut support. You'll find it useful in other places of your app as well.
fuse.js (5KB) provides fuzzy search support.

Integrate with app

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

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>
  );
};

Recommend Projects