🚀
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.
-
Use atom-like reactive object to control your palette.
Demo
Try the full demo on our documentation site.
Usage
Install the library
# Core Library
npm install @cn-ui/command-palette
# Peer Dependencies
npm install solid-transition-group tinykeys fuse.js @cn-ui/use
- 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.
- @cn-ui/use (5KB): provides many useful util for solid-js developer.
Integrate with app
// define actions in one module say `actions.ts`
import { defineAction } from '@cn-ui/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();
},
});
// If you are lazy to write id, then just give an array!
export const actions = [minimalAction, incrementCounterAction];
// render inside top level Solid component
// Not Root again, because it make Other Components Confuse!
import { PaletteRoot, CommandPalette } from '@cn-ui/command-palette';
import { atom } from '@cn-ui/use';
import { actions } from './actions';
import '@cn-ui/command-palette/pkg-dist/style.css';
const App = () => {
const actionsContext = {
increment() {
console.log('increment count state by 1');
},
};
const actionController = atom(actions);
return (
<div class="my-app">
<PaletteRoot
actions={actionController} // or you can just put actions to there without reactive
actionsContext={actionsContext}
>
<CommandPalette />
</PaletteRoot>
</div>
);
};