{"id":15837109,"url":"https://github.com/dulajkavinda/commandk","last_synced_at":"2025-03-15T17:31:31.752Z","repository":{"id":185985459,"uuid":"673444357","full_name":"dulajkavinda/commandK","owner":"dulajkavinda","description":"🎯 A compact React component and npm package enabling quick website search through a modal, triggered by pressing Command + K","archived":false,"fork":false,"pushed_at":"2023-08-05T00:36:28.000Z","size":754,"stargazers_count":12,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T04:48:18.600Z","etag":null,"topics":["babel","jest","npm-package","react","react-testing-library","rollup","storybook"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/commandk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dulajkavinda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-01T16:28:00.000Z","updated_at":"2024-08-27T07:19:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"52c4626c-715c-463f-9f08-832eadec32d7","html_url":"https://github.com/dulajkavinda/commandK","commit_stats":null,"previous_names":["dulajkavinda/commandk"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulajkavinda%2FcommandK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulajkavinda%2FcommandK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulajkavinda%2FcommandK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulajkavinda%2FcommandK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulajkavinda","download_url":"https://codeload.github.com/dulajkavinda/commandK/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243766688,"owners_count":20344798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","jest","npm-package","react","react-testing-library","rollup","storybook"],"created_at":"2024-10-05T15:20:57.723Z","updated_at":"2025-03-15T17:31:31.442Z","avatar_url":"https://github.com/dulajkavinda.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eCommandK\u003c/h1\u003e\n\nhttps://github.com/dulajkavinda/commandK/assets/47476282/50fdeb37-bb72-49a7-9869-4be8b3b0c161\n\n  \u003cp\u003eA compact React component and npm package enabling quick website search through a modal, triggered by pressing Command + K\u003c/p\u003e\n  \u003ca href=\"https://www.npmjs.com/package/commandk\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/dm/commandk.svg?color=%235599ff\u0026style=for-the-badge\" alt=\"npm Downloads per Month\"\u003e\n  \u003ca\u003e\n  \u003ca href=\"https://github.com/dulajkavinda/commandK/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/commandk.svg?color=%23c677cf\u0026style=for-the-badge\" alt=\"MIT License\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n## Table of contents\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n    - [Data](#data)   \n- [API](#api)\n- [Accessibility](#accessibility)\n- [Local Development](#local-development)\n- [Contributing](#contributing)\n- [License](#license)\n  \n## Features\nCurrently, commandK supports the following:\n\n - [x] Open the popup using `Command` + `K`\n - [x] Filter items based on search terms\n - [x] Supports 3 sizes for the modal (medium, large and small)\n - [x] Supports custom styles\n - [x] Navigation with keyboard\n - [x] Mobile responsive \n - [ ] Light mode support\n \nYou can suggest new features [here](https://github.com/dulajkavinda/commandK/issues)\n\n## Installation\n\n### Package Managers\n\n```bash\n# npm\nnpm i commandk\n\n# yarn\nyarn add commandk\n\n# pnpm\npnpm i commandk\n```\n\n## Usage\n\n```js\nimport { CommandK } from 'commandk'\n\n\u003cCommandK data={[]} /\u003e\n```\n\nOr you can access the `Modal` component and `Button` component separately and implement your own logic.\n\n```js\nimport React from \"react\"\nimport { Modal, Button } from 'commandk'\n\nconst App = () =\u003e {\n\n  const [isOpen, setIsOpen] = React.useState\u003cboolean\u003e(false);\n\n  return (\n    \u003c\u003e\n      {isOpen \u0026\u0026 \u003cModal data={[]} toggle={() =\u003e setIsOpen(false)} /\u003e}\n      \u003cButton onClick={() =\u003e setIsOpen(true)} /\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default App;\n```\n\n### Data\n\nStructure of the data that's taken by the component,\n\n**TS Definition**\n```js\nexport interface Item {\n  icon: string\n  title: string\n  url?: string\n}\n\ninterface Group {\n  sectionName: string\n  items: Item[]\n}\n```\n**Sample**\n```js\nconst list: Group[] = [\n  {\n    sectionName: 'Repositories',\n    items: [\n      {\n        icon: '🗂',\n        title: 'This is a test title',\n        url: '/repo',\n      },\n      {\n        icon: '🚀',\n        title: 'This is another one to check',\n        url: 'https://google.lk',\n      },\n    ],\n  },\n]\n```\n\n## API\n\n### CommandK\n\n| Parameter                    | Description                                               | Type                         | Default          |\n| ---------------------------- | --------------------------------------------------------- | ---------------------------- | ---------------- |\n| data                         | data needed to populate the search modal                  | Array                        | []               |\n| keyLetter                    | key that needs be appear on the button                    | string                       | `K`              |                                                                                   \n| buttonSize                   | size of the button                                        | `small` `medium` `large`     | `medium`         | \n| modalSize                    | size of the modal                                         | `small` `medium` `large`     | `medium`         |\n| username                     | name of the search modal                                  | string                       | home             |\n| perSectionLimit              | limit numner of items in a section                        | number                       | -                |\n| hideButton                   | hide the button                                           | boolean                      | `false`          |\n| customStyles                 | the style of the component                                | Object                       | {}               |\n\n### Modal\n\n| Parameter                    | Description                                               | Type                         | Default          |\n| ---------------------------- | --------------------------------------------------------- | ---------------------------- | ---------------- |\n| data                         | data needed to populate the search modal                  | Array                        | []               |\n| isOpen                       | to open and close the modal                               | boolean                      | `false`          |                                                                                   \n| size                         | size of the modal                                         | `small` `medium` `large`     | `medium`         |\n| username                     | name of the search modal                                  | string                       | home             |\n| perSectionLimit              | limit numner of items in a section                        | number                       | -                |\n| toggle                       | close the modal                                           | Function                     | () =\u003e null       |\n\n### Button\n\n| Parameter                    | Description                                               | Type                         | Default          |\n| ---------------------------- | --------------------------------------------------------- | ---------------------------- | ---------------- |\n| keyLetter                    | key that needs be appear on the button                    | string                       | `K`              |                                                                                       \n| size                         | size of the modal                                         | `small` `medium` `large`     | `medium`         |\n| styles                       | the style of the component                                | Object                       | {}               |\n| hide                         | hide the button                                           | boolean                      | `false`          |\n| toggle                       | open  the modal                                           | Function                     | () =\u003e null       |\n\n## Local Development\n\nThe `main` branch contains the latest version of the CommandK component.\n\nTo begin local development:\n\n1. `yarn install`\n2. `yarn run storybook`\n\nStorybook will appear on on http://localhost:6006\n\nYou 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 `\u003ccomponent\u003e/__tests__`).\nTo check the test coverage you can run `yarn coverage`.\n\n## Accessibility\n\n### Keyboard support\n\n- _Down_: Navigate through the searched items\n- _Up_: Navigate through the searched items\n- _Enter_: Jump to the selected page/url\n- _Command/K_: open and close the search modal\n\n## Contributing\nContributions 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:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Make the necessary changes and commit them.\n4. Push your changes to your forked repository.\n5. Submit a pull request to the main repository.\n\n## License\nThis project is licensed under the MIT License. You can find more information in the [LICENSE](https://github.com/dulajkavinda/commandK/blob/main/LICENSE) file.\n\n#\nIf you need to reach out to me [contact me](mailto:hi@dulaj.dev).\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulajkavinda%2Fcommandk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulajkavinda%2Fcommandk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulajkavinda%2Fcommandk/lists"}