{"id":13752157,"url":"https://github.com/vutran/omnibar","last_synced_at":"2025-10-26T14:11:05.769Z","repository":{"id":20902207,"uuid":"90569704","full_name":"vutran/omnibar","owner":"vutran","description":":spades: Extensible search component for React.","archived":false,"fork":false,"pushed_at":"2022-06-06T22:42:40.000Z","size":3212,"stargazers_count":95,"open_issues_count":5,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-20T10:29:07.857Z","etag":null,"topics":["launcher","omnibar","omnisearch","react","search"],"latest_commit_sha":null,"homepage":"https://omnibar.now.sh/","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/vutran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-08T00:02:40.000Z","updated_at":"2025-04-04T13:25:31.000Z","dependencies_parsed_at":"2022-07-28T21:09:20.813Z","dependency_job_id":null,"html_url":"https://github.com/vutran/omnibar","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/vutran/omnibar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fomnibar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fomnibar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fomnibar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fomnibar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vutran","download_url":"https://codeload.github.com/vutran/omnibar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fomnibar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281114823,"owners_count":26446054,"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-26T02:00:06.575Z","response_time":61,"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":["launcher","omnibar","omnisearch","react","search"],"created_at":"2024-08-03T09:01:00.460Z","updated_at":"2025-10-26T14:11:05.736Z","avatar_url":"https://github.com/vutran.png","language":"TypeScript","funding_links":["https://www.patreon.com/vutran"],"categories":["*.js"],"sub_categories":["React"],"readme":"# Omnibar\n\n[![Travis](https://img.shields.io/travis/vutran/omnibar/master.svg?maxAge=2592000\u0026style=flat-square)](https://travis-ci.org/vutran/omnibar) [![Coveralls branch](https://img.shields.io/coveralls/vutran/omnibar/master.svg?maxAge=2592000\u0026style=flat-square)](https://coveralls.io/github/vutran/omnibar) [![license](https://img.shields.io/github/license/vutran/omnibar.svg?maxAge=2592000\u0026style=flat-square)](LICENSE)\n\n\u003e Extensible search component for React.\n\n![](screenshot.png?raw=true)\n\n## Demo\n\nThe demo can be found in [this repository](https://github.com/vutran/omnibar-www).\n\n## Install\n\n```bash\n$ npm i -S omnibar\n```\n\n## Usage\n\nImport the module and your extensions\n\n```jsx\nimport Omnibar from 'omnibar';\nimport Foo from './Foo';\nimport Bar from './Bar';\n```\n\nRender it in your component\n\n```jsx\nexport default function MyComponent() {\n  return \u003cOmnibar placeholder=\"Enter keyword\" extensions={[Foo, Bar]} /\u003e;\n}\n```\n\n## Extending your Omnibar\n\n### Simple Extension\n\nThe example below returns a simple list of items. `\u003cOmnibar /\u003e` will\nrender an anchor item with the default result item schema.\n\n```typescript\n{\n  title: string;\n  url: string;\n}\n```\n\n```jsx\nexport default function FooExtension() {\n  return [\n    { title: 'Dropbox', url: 'https://dropbox.com' },\n    { title: 'GitHub', url: 'https://github.com' },\n    { title: 'Facebook', url: 'https://facebook.com' },\n  ];\n}\n```\n\n### Promise-based Results\n\nExtensions can also return a `Promise` that resolves a list of items.\n\nFor example, given an API endpoint `https://myapi.com/` that takes\na request parameter `q`, it will return a JSON response like so:\n\n```json\n{\n  \"items\": [\n    { \"name\": \"foo\", \"website\": \"foo.com\" },\n    { \"name\": \"bar\", \"website\": \"bar.com\" }\n  ]\n}\n```\n\nYour extension can return a `Promise` that resolves into a list of items.\nThe example below makes a request to our fake API endpoint\nand maps it's data schema with the default anchor schema.\n\n```jsx\nexport default function SearchExtension(query) {\n    return fetch(`https://myapi.com/?q=${query}`)\n        .then(resp =\u003e resp.json().items.map(item =\u003e ({\n            title: item.name,\n            url: item.website,\n        });\n```\n\n### Custom Renderers\n\nIf you would like to display additional data in your result listings such as a thumbnail, you can\npass a rendering function to the `render` prop in your `\u003cOmnibar /\u003e` instance.\n\nThe example below changes our result item schema to be in the shape of:\n\n```typescript\n{\n  owner: {\n    avatar_url: string;\n  }\n  html_url: string;\n  full_name: string;\n}\n```\n\n```jsx\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cOmnibar placeholder=\"Search GitHub\" extensions={[GitHub]}\u003e\n        {({ item }) =\u003e \u003cdiv\u003e{item.full_name}\u003c/div\u003e}\n      \u003c/Omnibar\u003e\n    );\n  }\n}\n```\n\nOr you can use the `render` prop to specify your custom component:\n\n```typescript\nfunction ResultItem({ item }) {\n  return (\n    \u003cdiv\u003e\n      \u003cimg src={item.owner.avatar_url} width={30} height={30} /\u003e\n      \u003ca href={item.html_url}\u003e{item.full_name}\u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cOmnibar\n        placeholder=\"Search GitHub\"\n        extensions={[GitHub]}\n        render={ResultItem}\n      /\u003e\n    );\n  }\n}\n```\n\n## Extension Decorators\n\n### `command()`\n\nThe `command()` helper will wrap your extension through a command prefix and will filter only those matching the command.\n\n**Example**:\n\n```js\nimport { command } from 'omnibar';\n\nfunction MyExtension() {\n  return [\n    // ...items\n  ];\n}\n\nexport default command(MyExtension, 'foo');\n```\n\nIn the above example, `MyExtension` will be queried only if the user starts their query with the keyword `foo`.\n\n```\nfoo test -\u003e queries extensions\nfootest -\u003e doesn't query extension\ntest -\u003e doesn't query extension\n```\n\n## Higher Order Components\n\n### Extend Your Omnibar\n\nThe `withExtensions` is a HOC factory method to enhance your Omnibar with your own extensions.\n\n**Example**\n\n```js\nimport Omnibar, { withExtensions } from 'omnibar';\n\nconst GitSearchBar = withExtensions([GitHub])(Omnibar);\nconst NpmSearchBar = withExtensions([Npm])(Omnibar);\nconst GlobalSearchBar = withExtensions([GitHub, Npm])(Omnibar);\n\n// renders a GitHub-only search bar\n// \u003cGitSearchBar /\u003e\n\n// renders a Npm-only search bar\n// \u003cNpmSearchBar /\u003e\n\n// renders the global search bar (includes GitHub, and Npm)\n// \u003cGlobalSearchBar /\u003e\n```\n\nThis will produce the results below:\n\n```js\n// \u003cOmnibar extensions={[GitHub]} {...props} /\u003e\n\n// \u003cOmnibar extensions={[Npm]} {...props} /\u003e\n\n// \u003cOmnibar extensions={[GitHub, Npm]} {...props} /\u003e\n```\n\n### Voice Commands\n\nThe `withVoice` is another HOC factory method to enhance your Omnibar with voice recognition using the [WebSpeech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API).\n\n**_Note that this is experimental._**\n\n**Example**\n\n```js\nimport Omnibar, { withVoice } from 'omnibar';\n\nconst VoiceBar = withVoice(Omnibar);\n\n// voice-enhanced Omnibar\n// \u003cVoiceBar /\u003e\n\n// regular Omnibar:\n// \u003cOmnibar /\u003e\n```\n\n### Composing Your Omnibar\n\nIncluded in the `omnibar` package is a `compose()` function that allows you to apply all these nifty features.\n\n#### Before\n\n```js\nconst GitVoiceSearch = withVoice(withExtensions([GitHub]))(Omnibar);\n```\n\n#### After\n\n```js\nconst GitVoiceSearch = compose(\n  withVoice,\n  withExtensions([GitHub])\n)(Omnibar);\n\n// render\n// \u003cGitVoiceSearch /\u003e\n```\n\n## Props\n\n| Prop                 | Type                  | Required? | Description                                                                                        |\n| :------------------- | :-------------------- | :-------- | :------------------------------------------------------------------------------------------------- |\n| `autoFocus`          | `boolean`             |           | Optionally make the Omnibar autoFocus.                                                             |\n| `children`           | `Function`            |           | Optional rendering function for each result item. Arguments: `{ item, isSelected, isHighlighted }` |\n| `inputDelay`         | `number`              |           | Set an input delay used for querying extensions (Default: 100ms)                                   |\n| `maxResults`         | `number`              |           | The maximum amount of results to display overall.                                                  |\n| `maxViewableResults` | `number`              |           | The maximum amount of results to display in the viewable container (before scrolling).             |\n| `onAction`           | `Function`            |           | Apply an action callback when an item is executed. Arguments: `item`                               |\n| `onQuery`            | `Function`            |           | Triggered when a query is made                                                                     |\n| `placeholder`        | `string`              |           | Input placeholder                                                                                  |\n| `render`             | `Function`            |           | Alias of `children`                                                                                |\n| `resultStyle`        | `object`              |           | Style object override for the result container                                                     |\n| `style`              | `React.CSSProperties` |           | Style object override for the `\u003cinput /\u003e` element                                                  |\n| `value`              | `string`              |           | Optional value to send to the Omnibar.                                                             |\n\n## Contributing\n\n1. Clone this repository and the [website repository](https://github.com/vutran/omnibar-www).\n2. Run `npm i` or `yarn` on the `omnibar` directory.\n3. Run `npm link` on the `omnibar` directory.\n4. Run `npm i` or `yarn` on the `omnibar-www` directory.\n5. Run `npm link omnibar` on the `omnibar-www` directory.\n6. Run `npm run dev` on the `omnibar-www` directory.\n7. Open [https://localhost:8080](https://localhost:8080) in your browser.\n\n## Support\n\nLike what you see? [Become a Patron](https://www.patreon.com/vutran) and support me via a monthly donation.\n\n## License\n\nMIT © [Vu Tran](https://github.com/vutran/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutran%2Fomnibar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvutran%2Fomnibar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutran%2Fomnibar/lists"}