Commandk NPM | npm.io

Features
Installation
Usage
- Data
API
Accessibility
Local Development
Contributing
License

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	-
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	{}
toggle	open the modal	Function	() => null

Local Development

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

To begin local development:

yarn install
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: