Command Palette API

Actions can be defined with the defineActions API.

These actions can then be passed to CommandPalette

Render CommandPalette at the root of your application.

<script>
	import CommandPalette, { defineActions, createStoreMethods } from 'svelte-command-palette';
	{/* Render command palette at the root of your application */}

	// define actions using the defineActions API

    const paletteMethods = createStoreMethods();

	<button on:click={() => paletteMethods.openPalette()}>Open Command Palette</button>

	<CommandPalette

		actions={defineActions([
			{
				// Unique identifier for your action
				id: '1',
				// title for you action
				title: 'Go to github',
				// subtitle for the action
				subTitle: 'Press to redirect to github',
				// description of the action
				description: '1. something going here idk about?',
				// called when the action is triggered along with palette state and methods
				onRun: ({ action, storeProps, storeMethods }) => {
					console.log('do something');
				},
				// decide whether to run the action based on your palette state
				canActionRun: ({ action, storeProps, storeMethods }) => {
					return true;
				},
				// keyboard shortcut to call the action
				shortcut: 'G G',
				// allows searching for actions via keywords
				keywords: ['git', 'github']
			}
		])}
	/>
</script>