Omnibar is an extensible search component for React.

Back in 2015 on my path to open source, I’ve created an Alfred alternative launcher (Dext). It was my first React project and it was most likely over-engineered. The stack included a Redux, Redux Saga for managing state, and Glamor for managing CSS in JS. Since then, I’ve rewritten the same thing many times and found myself discarding most of the third-party frameworks. I also only needed to extend the results set and the shape of each item. I wanted something simple that can be dropped in easily. Today, I’m happy to introduce that you and it’s called Omnibar.

Omnibar is a React component that renders a search/action bar. It can be extended to perform an action and customized to fit the look of your choice.

At the very basic level, rendering an Omnibar is as easy as this:

Omnibar employs a simple plugin architecture to allow extending its returned results listings via standard node modules. Our EchoExtension is just a regular module that will return our results when executed.

EchoExtension simply exports a function that accepts a string param query and returns an array of items. By default, each item should in the shape of { title, subtitle } . The Omnibar instance will simply echo back our query as a result with the default title, and subtitle in the result listings.

Custom Extensions

Omnibar’s extension system promotes a user-driven community of extensions. You can choose to share and publish your extensions on npmjs.org or keep a private collection.

Results Item Renderer

By default, Omnibar uses a built-in default results item renderer that allows you to pass an array of { title, subtitle } objects but you can override the results item renderer to fit your use-case.

A results item renderer is just a simple stateless functional component.

The example above tells Omnibar to render each result item in the results listings and reads from an object in the shape of { title, url } . Since your item renderer now takes a url , your extensions can now return an array of items of that same shape.

Filtering Results

While your list of extensions may grow over time, you may want to add some sort of filtering capabilities and separate your results with a prefix in your query.

Included in Omnibar is a higher-order function that wraps an extension with a prefix.

Using command() , you can pass your extension and a prefix to tell Omnibar to query that specified extension only when your query contains the provided prefix.

Voice Commands

If you can decorate extensions, you can also decorate your Omnibar. In the same manner as command() , Omnibar also ships with a withVoice() higher-order function that allows you to enhance your Omnibar with voice capabilities by leveraging the WebSpeech API.

What’s Next?

Omnibar’s simple API allows for easy extension and flexibility. I’ve created a basic demo on CodeSandbox for you to start messing around with. Go ahead and start building out your library of extensions. I can’t wait to see what you build with Omnibar.

Omnibar is available on GitHub. Contributions, feedback, and suggestions are always welcome. You can also reach me directly via Twitter @tranvu for any questions/shout-outs.