Skip to content

🎯 A compact React component and npm package enabling quick website search through a modal, triggered by pressing Command + K

License

Notifications You must be signed in to change notification settings

dulajkavinda/commandK

Repository files navigation

CommandK

commandk-demo-compressed.mp4

A compact React component and npm package enabling quick website search through a modal, triggered by pressing Command + K

npm Downloads per Month MIT License

Table of contents

Features

Currently, commandK supports the following:

  • Open the popup using Command + K
  • Filter items based on search terms
  • Supports 3 sizes for the modal (medium, large and small)
  • Supports custom styles
  • Navigation with keyboard
  • Mobile responsive
  • Light mode support

You can suggest new features here

Installation

Package Managers

# npm
npm i commandk

# yarn
yarn add commandk

# pnpm
pnpm i commandk

Usage

import { CommandK } from 'commandk'

<CommandK data={[]} />

Or you can access the Modal component and Button component separately and implement your own logic.

import React from "react"
import { Modal, Button } from 'commandk'

const App = () => {

  const [isOpen, setIsOpen] = React.useState<boolean>(false);

  return (
    <>
      {isOpen && <Modal data={[]} toggle={() => setIsOpen(false)} />}
      <Button onClick={() => setIsOpen(true)} />
    </>
  )
}

export default App;

Data

Structure of the data that's taken by the component,

TS Definition

export interface Item {
  icon: string
  title: string
  url?: string
}

interface Group {
  sectionName: string
  items: Item[]
}

Sample

const list: Group[] = [
  {
    sectionName: 'Repositories',
    items: [
      {
        icon: 'πŸ—‚',
        title: 'This is a test title',
        url: '/repo',
      },
      {
        icon: 'πŸš€',
        title: 'This is another one to check',
        url: 'https://google.lk',
      },
    ],
  },
]

API

CommandK

Parameter Description Type Default
data data needed to populate the search modal Array []
keyLetter key that needs be appear on the button string K
buttonSize size of the button small medium large medium
modalSize size of the modal small medium large medium
username name of the search modal string home
perSectionLimit limit numner of items in a section number -
hideButton hide the button boolean false
customStyles the style of the component Object {}

Modal

Parameter Description Type Default
data data needed to populate the search modal Array []
isOpen to open and close the modal boolean false
size size of the modal small medium large medium
username name of the search modal string home
perSectionLimit limit numner of items in a section number -
toggle close the modal Function () => null

Button

Parameter Description Type Default
keyLetter key that needs be appear on the button string K
size size of the modal small medium large medium
styles the style of the component Object {}
hide hide the button boolean false
toggle open the modal Function () => null

Local Development

The main branch contains the latest version of the CommandK component.

To begin local development:

  1. yarn install
  2. yarn run storybook

Storybook will appear on on http://localhost:6006

You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in <component>/__tests__). To check the test coverage you can run yarn coverage.

Accessibility

Keyboard support

  • Down: Navigate through the searched items
  • Up: Navigate through the searched items
  • Enter: Jump to the selected page/url
  • Command/K: open and close the search modal

Contributing

Contributions are welcome! If you have any ideas, bug reports, or feature requests, please submit them through the GitHub issue tracker. If you would like to contribute code, follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make the necessary changes and commit them.
  4. Push your changes to your forked repository.
  5. Submit a pull request to the main repository.

License

This project is licensed under the MIT License. You can find more information in the LICENSE file.

If you need to reach out to me contact me.