{"id":13606899,"url":"https://github.com/adenekan41/scoutbar","last_synced_at":"2025-10-17T14:35:00.989Z","repository":{"id":43201055,"uuid":"417307031","full_name":"adenekan41/scoutbar","owner":"adenekan41","description":"⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.","archived":false,"fork":false,"pushed_at":"2024-04-26T20:45:49.000Z","size":293,"stargazers_count":134,"open_issues_count":2,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T05:30:57.170Z","etag":null,"topics":["helpers","react","react-component","utility"],"latest_commit_sha":null,"homepage":"https://scoutbar.co","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/adenekan41.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":"2021-10-14T23:06:55.000Z","updated_at":"2025-05-07T10:38:39.000Z","dependencies_parsed_at":"2024-01-14T05:00:08.279Z","dependency_job_id":"ee3a8f46-d3bb-4ff2-a5d9-258eb27913ce","html_url":"https://github.com/adenekan41/scoutbar","commit_stats":{"total_commits":110,"total_committers":2,"mean_commits":55.0,"dds":"0.027272727272727226","last_synced_commit":"6b40e7046120c3086f8043b3a52afb8ef4a008d1"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/adenekan41/scoutbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Fscoutbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Fscoutbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Fscoutbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Fscoutbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adenekan41","download_url":"https://codeload.github.com/adenekan41/scoutbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Fscoutbar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278358476,"owners_count":25973946,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["helpers","react","react-component","utility"],"created_at":"2024-08-01T19:01:13.606Z","updated_at":"2025-10-04T18:50:08.762Z","avatar_url":"https://github.com/adenekan41.png","language":"TypeScript","funding_links":[],"categories":["Libraries","TypeScript"],"sub_categories":["React"],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.ibb.co/bXmx6mh/Group-11.png\" width=\"280\"/\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eScoutBar\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e⌨️ Spotlight for your app\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n[![npm](https://badge.fury.io/js/scoutbar.svg)](https://www.npmjs.com/package/scoutbar)\n\n[![NPM](https://nodei.co/npm/scoutbar.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/scoutbar/)\n\n### [See Demo On Codesandbox](https://codesandbox.io/s/scoutbar-gm9er?file=/src/App.tsx)\n\n### [See Documentation](https://scoutbar.co/docs/home)\n\n## ⚡️Overview\n\nIt has been observed that users who are familiar with the `CMD + K` shortcut for searching and performing complex actions within applications like Slack and Workspace by Facebook are able to navigate these apps more efficiently by 21%. This highlights the value of providing users with effective search and navigation tools.\n\nWith this in mind, we are excited to introduce Scoutbar - an easy-to-install React component that automates the `CMD + K` experience. Scoutbar is portable and extensible, making it a convenient solution for improving the search and navigation capabilities of your application. Give your users the ability to quickly find what they are looking for and increase their productivity with Scoutbar.\n\n## 🔧 Installation\n\nYou can easily install this package with yarn or npm:\n\n```\n$ yarn add scoutbar\n```\n\nor\n\n```\n$ npm install scoutbar\n```\n\n## ✨ Features\n\n- 🤘 Super easy to install\n- 📦 It's tiny, only 400b gzipped\n- 🙅‍♂️ It's got keyboard nav support\n  - And keyboard shortcuts to configure specific actions\n- 🔧 Flexible API\n  - A simple data structure and function helper to customize your experience\n- 💪 Fully tested, typed, and reliable\n- 🌍 Works in CommonJS, ESM, and the browser\n- 🤓 Handy helpers included\n- 🧑 Zero dependencies\n\n## 📖 Usage\n\nOne of the best things about it is that it is as simple as integrating one\ncomponent. you have scoutbar on your app.\n\n```jsx\nimport React from 'react';\nimport { ScoutBar } from 'scoutbar';\n\nexport default function App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cScoutBar\n        actions={({ createScoutAction }) =\u003e [\n          createScoutAction({\n            label: 'Get Started',\n            description: 'Get started with scoutbar',\n            href: '/',\n          }),\n        ]}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nSeeing is believing! There are clear descriptions of each utility, as well as\ninstructions on how to use them, in the documentation.\n\n## 🍷 Documentation [See All](https://scoutbar.co/docs/home)\n\n### tutorial\n\n#### `Type -\u003e Boolean`\n\n#### `Default -\u003e true`\n\nAllows you the ability to disable / hide scoutbar tutorial hints. i'e the section\nthat tells users to navigate with the arrows or tabs. e.g\n\n```jsx\n  \u003cScoutBar\n    tutorial={false}\n    ...\n  /\u003e\n```\n\n### noAnimation\n\n#### `Type -\u003e Boolean`\n\n#### `Default -\u003e false`\n\nAllows you to disable every animation on scoutbar Disables every animations on\nscoutbar. this is by default true if scoutbar detects that the user has\nrequested that the system minimize the amount of non-essential motion it uses.\n\n```jsx\n  \u003cScoutBar\n    noAnimation={false}\n    ...\n  /\u003e\n```\n\n### theme\n\n#### `Type -\u003e 'light' | 'dark' | 'auto'`\n\n#### `Default -\u003e 'light'`\n\nAllows you to switch the theme of the scoutbar depending on how you want it.\nauto switches to the theme of the current system.\n\n```jsx\n  \u003cScoutBar\n    theme=\"light\"\n    ...\n  /\u003e\n```\n\n### acknowledgement\n\n#### `Type -\u003e Boolean`\n\n#### `Default -\u003e true`\n\nShow the scoutbar acknowledgement logo on the top right of the input bar.\n\n```jsx\n  \u003cScoutBar\n   acknowledgement={true}\n    ...\n  /\u003e\n```\n\n### brandColor\n\n#### `Type -\u003e String`\n\n#### `Default -\u003e #000`\n\nAllows you to set the official scoutbar brand color. it helps to match the\ncolor grade on your application\n\n```jsx\n  \u003cScoutBar\n   brandColor=\"red\"\n    ...\n  /\u003e\n```\n\n### placeholder\n\n#### `Type -\u003e String | String[]`\n\n#### `Default -\u003e ['What would you like to do today ?','What do you need?', 'Lets help you navigate'],`\n\nAllows you to switch between different placeholder texts or just a single one.\n\n```jsx\n  \u003cScoutBar\n    placeholder={[\n      'What products do you need ? ',\n      'Whats the name of your phone ?'\n    ]}\n\n    or\n\n    placeholder=\"What do you need ?\"\n    ...\n  /\u003e\n```\n\n### revealScoutbar\n\n#### `Type -\u003e boolean`\n\n#### `Default -\u003e false`\n\nReveal the scoutbar with an external action. PS forcefully opens the scoutbar\n\n```jsx\n  \u003cScoutBar\nrevealScoutbar={// your state hook here }\n    ...\n  /\u003e\n```\n\n[See All Documentation](https://scoutbar.co/docs/home)\n\n## 🤔Thought Process\n\n- https://defkey.com/what-means/command-k\n- https://www.theverge.com/2017/6/2/15475078/slack-keyboard-shortcuts-how-to-guide#:~:text=%E2%8C%98%20%2B%20K%20%2F%20Ctrl%20%2B%20K,to%20jump%20to%20that%20conversation.\n\n## Contributing\n\nWhen contributing to this repository, please first discuss the change you wish\nto make via an issue. This can be a feature request or a bug report. After a\nmaintainer has triaged your issue, you are welcome to collaborate on a pull\nrequest. If your change is small or uncomplicated, you are welcome to open an\nissue and pull request simultaneously.\n\nPlease note we have a code of conduct, please follow it in all your interactions\nwith the project.\n\n### Running Scoutbar Locally\n\nA local test environment has been setup for developers that wants to develop and\ncontribute to scoutbar. to start up the dev server do the following\n\n```\n$ yarn install\n$ yarn run dev // server running on http://localhost:3008\n```\n\n### Linking Scoutbar Locally\n\nRun\n\n```\n$ npm link\n```\n\nThis will create a symbolic link in the /usr/local/lib/node_modules/ folder,\nthat contains the global npm packages in the system, the ones installed using\nnpm -g.\n\n```\nnpm link scoutbar\n```\n\nThen we run this in the project we want to link scoutbar locally to\n\n[See More on contributing](https://scoutbar.co/docs/contribute)\n\n## 🤝 License\n\n\u003e MIT © [codewonders.dev](https://codewonders.dev) \u0026nbsp;\u0026middot;\u0026nbsp; GitHub\n\u003e [@adenekan41 / codewonders](https://github.com/adenekan41)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadenekan41%2Fscoutbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadenekan41%2Fscoutbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadenekan41%2Fscoutbar/lists"}