Shortcuts

Import component

import { Shortcuts } from 'quick-shortcuts'

Types

import type { Option, StyleProp, SearchAlgoType } from "quick-shortcuts"

Click to see props definition

Option

type OnSelectFunction = {
    (): void;
};

type Option = {
    id: string | number
    title: string
    description?: string
    suffixText?: string
    icon?: Component
    isVisible: boolean
    isDisabled?: boolean
    onSelect?: OnSelectFunction
    children?: Omit<Option, 'children'>[]
}

SearchAlgoType

type SearchAlgoType = 'normal' | 'word-break'

StyleProp

type StyleProp = {
	// Dialog
    dialogColor?: string
    dialogShadowColor?: string
    dialogBorderRadius?: string
    dialogZIndex?: number
    dialogHeight?: string
    dialogWidth: string

    // Title
    titleColor?: string
    titleFontSize?: string

    // Search
    searchTextColor?: string
    searchPlaceholder?: string
    searchPlaceholderColor?: string
    searchTextFontSize?: string

	// Option
    optionTextColor?: string
    optionDescriptionColor?: string
    optionHoverColor?: string
}

Usage

<Shortcuts
    searchAlgoType="normal"
    activationKey="m"
    dialogTitle="Quick shortcuts"
    :options="options"
    :customStyles="customStyles"
    @select="optionSelected"
/>

Props

Props	Type	Default	Description
activationKey	string - Optional	k	Supported characters are a-z. It is used to trigger dialog. Ctrl will always be there. eg. Ctrl + J
searchAlgoType	SearchAlgoType - Optional	normal	It is a search algorithm type. Supported types are: normal and word-break. Learn more
dialogTitle	string - Optional	Shortcuts	Title show above the search input
customStyles	StyleProp🔗 - Optional		Colors and font sizes for dialog
options	Option[]🔗 - Required	undefine	Data to render list of option for searching and performing actions

Events

change - Trigger when any option is selected.

Function definition

function optionSelected(option: Option) {
    console.log('Selected option: ', option)
}

Labelled image

Search algorithm

normal

const stringMatching = (option: Option, searchQuery: string) => {
    const query = searchQuery.toLowerCase()
    if (!query) return true

    const { title, description, suffixText } = option

    return (
        title.toLowerCase().includes(query) ||
        description?.toLowerCase().includes(query) ||
        suffixText?.toLowerCase().includes(query)
    )
}

word-break

const workBreakStringMatching = (option: Option, searchQuery: string) => {
    const query = searchQuery.trim().toLowerCase().split(' ')
    if (!query.length) return true

    const { title, description, suffixText } = option

    const searchableString =`
		${title.toLowerCase()}
		${description?.toLowerCase() ?? ''}
		${suffixText?.toLowerCase() ?? ''}
	`
    return query.every((word) => searchableString.includes(word))
}