<commit_before># Omnibar

[![Travis](https://img.shields.io/travis/vutran/omnibar/master.svg?maxAge=2592000&style=flat-square)](https://travis-ci.org/vutran/omnibar) [![Coveralls branch](https://img.shields.io/coveralls/vutran/omnibar/master.svg?maxAge=2592000&style=flat-square)](https://coveralls.io/github/vutran/omnibar) [![license](https://img.shields.io/github/license/vutran/omnibar.svg?maxAge=2592000&style=flat-square)](LICENSE)

> Extensible search component for React.

![](screenshot.png?raw=true)

## Demo

The demo can be found in [this repository](https://github.com/vutran/omnibar-www).

## Install

```bash
$ npm i -S omnibar
```

or with Yarn:

```bash
$ yarn add omnibar
```

## Usage

Import the module and your extensions

```jsx
import Omnibar from 'omnibar';
import FooExtension from './FooExtension';
import BarExtension from './BarExtension';
```

Render it in your component

```jsx
export default function MyComponent() {
  return (
    <Omnibar
      placeholder="Enter keyword"
      extensions={[FooExtension, BarExtension]}
    />
  );
}
```

## Extending your Omnibar

### Simple Extension

The example below returns a simple list of items. `<Omnibar />` will
render an anchor item with the default result item schema.

```typescript
{
  title: string;
  url: string;
}
```

```jsx
export default function FooExtension() {
  return [
    { title: 'Dropbox', url: 'https://dropbox.com' },
    { title: 'GitHub', url: 'https://google.com' },
    { title: 'Facebook', url: 'https://facebook.com' },
  ];
}
```

### Promise-based Results

Extensions can also return a `Promise` that resolves a list of items.

For example, given an API endpoint `https://myapi.com/` that takes
a request parameter `q`, it will return a JSON response like so:

```json
{
  "items": [
    { "name": "foo", "website": "foo.com" },
    { "name": "bar", "website": "bar.com" }
  ]
}
```

Your extension can return a `Promise` that resolves into a list of items.
The example below makes a request to our fake API endpoint
and maps it's data schema with the default anchor schema.

```jsx
export default function SearchExtension(query) {
    return fetch(`https://myapi.com/?q=${query}`)
        .then(resp => resp.items.map(item => ({
            title: item.name,
            url: item.website,
        });
```

### Custom Renderers

If you would like to display additional data in your result listings such as a thumbnail, you can
pass a rendering function to the `resultRenderer` prop in your `<Omnibar />` instance.

The example below changes our result item schema to be in the shape of:

```typescript
{
  owner: {
    avatar_url: string;
  }
  html_url: string;
  full_name: string;
}
```

```jsx
function ResultRenderer({ item }) {
  return (
    <div>
      <img src={item.owner.avatar_url} width={30} height={30} />
      <a href={item.html_url}>{item.full_name}</a>
    </div>
  );
}

class MyComponent extends React.Component {
  render() {
    return (
      <Omnibar placeholder="Search GitHub" extensions={[GitHubExtension]}>
        {({ item }) => <ResultRenderer item={item} />}
      </Omnibar>
    );
  }
}
```

Or you can use the `render` prop:

````typescript
class MyComponent extends React.Component {
  render() {
    return (
      <Omnibar
        placeholder="Search GitHub"
        extensions={[GitHubExtension]}
        render={ResultRenderer} />
    );
  }
}
```

## Decorators

### `command()`

The `command()` helper will wrap your extension through a command prefix and will filter only those matching the command.

**Example**:

```js
import { command } from 'omnibar';

function MyExtension() {
  return [
    // ...items
  ];
}

export default command(MyExtension, 'foo');
````

In the above example, `MyExtension` will be queried only if the user starts their query with the keyword `foo`.

```
foo test -> queries for results extensions
footest -> doesn't query extension
test -> doesn't query extension
```

## Voice Commands HOC

The `withVoice` is a HOC (higher-order component) factory method to create a voice-enabled Omnibar.

**Example**

```js
import Omnibar, { withVoice } from 'omnibar';

const VoiceBar = withVoice(Omnibar);

// voice-enhanced Omnibar
// <VoiceBar />

// regular Omnibar:
// <Omnibar />
```<commit_msg>more readme fixes<commit_after># Omnibar

[![Travis](https://img.shields.io/travis/vutran/omnibar/master.svg?maxAge=2592000&style=flat-square)](https://travis-ci.org/vutran/omnibar) [![Coveralls branch](https://img.shields.io/coveralls/vutran/omnibar/master.svg?maxAge=2592000&style=flat-square)](https://coveralls.io/github/vutran/omnibar) [![license](https://img.shields.io/github/license/vutran/omnibar.svg?maxAge=2592000&style=flat-square)](LICENSE)

> Extensible search component for React.

![](screenshot.png?raw=true)

## Demo

The demo can be found in [this repository](https://github.com/vutran/omnibar-www).

## Install

```bash
$ npm i -S omnibar
```

or with Yarn:

```bash
$ yarn add omnibar
```

## Usage

Import the module and your extensions

```jsx
import Omnibar from 'omnibar';
import FooExtension from './FooExtension';
import BarExtension from './BarExtension';
```

Render it in your component

```jsx
export default function MyComponent() {
  return (
    <Omnibar
      placeholder="Enter keyword"
      extensions={[FooExtension, BarExtension]}
    />
  );
}
```

## Extending your Omnibar

### Simple Extension

The example below returns a simple list of items. `<Omnibar />` will
render an anchor item with the default result item schema.

```typescript
{
  title: string;
  url: string;
}
```

```jsx
export default function FooExtension() {
  return [
    { title: 'Dropbox', url: 'https://dropbox.com' },
    { title: 'GitHub', url: 'https://google.com' },
    { title: 'Facebook', url: 'https://facebook.com' },
  ];
}
```

### Promise-based Results

Extensions can also return a `Promise` that resolves a list of items.

For example, given an API endpoint `https://myapi.com/` that takes
a request parameter `q`, it will return a JSON response like so:

```json
{
  "items": [
    { "name": "foo", "website": "foo.com" },
    { "name": "bar", "website": "bar.com" }
  ]
}
```

Your extension can return a `Promise` that resolves into a list of items.
The example below makes a request to our fake API endpoint
and maps it's data schema with the default anchor schema.

```jsx
export default function SearchExtension(query) {
    return fetch(`https://myapi.com/?q=${query}`)
        .then(resp => resp.items.map(item => ({
            title: item.name,
            url: item.website,
        });
```

### Custom Renderers

If you would like to display additional data in your result listings such as a thumbnail, you can
pass a rendering function to the `resultRenderer` prop in your `<Omnibar />` instance.

The example below changes our result item schema to be in the shape of:

```typescript
{
  owner: {
    avatar_url: string;
  }
  html_url: string;
  full_name: string;
}
```

```jsx
function ResultRenderer({ item }) {
  return (
    <div>
      <img src={item.owner.avatar_url} width={30} height={30} />
      <a href={item.html_url}>{item.full_name}</a>
    </div>
  );
}

class MyComponent extends React.Component {
  render() {
    return (
      <Omnibar placeholder="Search GitHub" extensions={[GitHubExtension]}>
        {({ item }) => <ResultRenderer item={item} />}
      </Omnibar>
    );
  }
}
```

Or you can use the `render` prop:

```typescript
class MyComponent extends React.Component {
  render() {
    return (
      <Omnibar
        placeholder="Search GitHub"
        extensions={[GitHubExtension]}
        render={ResultRenderer} />
    );
  }
}
```

## Decorators

### `command()`

The `command()` helper will wrap your extension through a command prefix and will filter only those matching the command.

**Example**:

```js
import { command } from 'omnibar';

function MyExtension() {
  return [
    // ...items
  ];
}

export default command(MyExtension, 'foo');
```

In the above example, `MyExtension` will be queried only if the user starts their query with the keyword `foo`.

```
foo test -> queries for results extensions
footest -> doesn't query extension
test -> doesn't query extension
```

## Voice Commands HOC

The `withVoice` is a HOC (higher-order component) factory method to create a voice-enabled Omnibar.

**Example**

```js
import Omnibar, { withVoice } from 'omnibar';

const VoiceBar = withVoice(Omnibar);

// voice-enhanced Omnibar
// <VoiceBar />

// regular Omnibar:
// <Omnibar />
```
{'fraction_non_alphanumeric': 0.1464670098268601, 'fraction_numerical': 0.00584932147870847, 'mean_word_length': 3.689522764673615, 'pattern_counts': {'":': 10, '<': 31, '<?xml version=': 0, '>': 45, 'https://': 22, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2782570', 'n_tokens_mistral': 2919, 'n_tokens_neox': 2747, 'n_words': 826}