Reactive Search 3.0 — UI Components for building ✨ Search UIs

We are excited to share Reactive Search v3: React UI components for building production grade search UIs.

This is our biggest release till date and includes new features (voice search, GraphQL support), major accessibility enhancements and changes that make it easier than ever to build production grade search UIs.

You can find the steps in the quickstart guide.

You can watch the 👆 1-min video to see how easy it is to get started and be productive. Or follow along with the quickstart guide.

💡 🚀 Over the last year, we have seen a lot of use-case requests by ReactiveSearch users and have built a dedicated marketplace of apps to help anyone get a jumpstart. It includes everything from a complete e-commerce app to searching with datagrid to creating a dashboard app to showing use of custom design systems. You can check the entire catalogue over at https://reactiveapps.io.

Migrating from SearchKit? Read our guide here:

Migrating from SearchKit to ReactiveSearch

What’s Awesome About The v3 Release

1. Render Props and Controlled Components Support — The new render props make the UI components more extendable. Controlled components support is now built-in.
2. Voice Search, Search Operators, GraphQL Support — You can now build voice search UIs. Preliminary GraphQL support helps with connecting to the backend in a more flexible manner. You can now also build a Google like advanced search behavior easily with the search operators.
3. 20+ data driven UI components — most comprehensive of any UI components library: Search, Lists, Dates, Range, Result displays. Components are styled and scoped with configurable theming and customizable query syntax. In v3, we have added a new StateProvider component that allows access to the search state for better extensibility.
4. Search Analytics Support — When you host your ElasticSearch backend with appbase.io (we support ElasticSearch indexes hosted anywhere), ReactiveSearch can capture search analytics, clicks and search state which are then accessible from appbase.io dashboard.
5. Production Ready — Reactive Search is now relied upon by over 500 open-source projects and many more privately.
6. Actively developed on Github — Available under Apache 2.0 license, this release includes over 500+ feature additions and issue fixes since the first release.
7. Bring your own components — Starting v2, you can bring your own components into ReactiveSearch to take advantage of the reactive state architecture. We now also support a StateProvider component that allows accessing the entire search state for better extensibility.

👆 You can also check out the Reactive Search overview video.

Who Is This For

If you haven’t been in the loop and are wondering what ReactiveSearch is all about, it is a UI components library for Elasticsearch to build data-driven apps. Some examples:

• a marketplace for connecting sports trainers with interested hobbyists,
• a crypto currency related news links aggregator,
• a business intelligence search platform,
• a social media analytics tool.

…. feeds, chats, you get the idea.

Time to Build Data-Driven Web Apps Today

From our experience in building data-driven apps, the key ingredients required and time frame for each of these are:

It might initially be fun to do the whole app’s wiring yourself, but it is just schlep work that is slow (takes several weeks), expensive (often requires a frontend and/or backend programming expertise) and has less tangible returns than other parts of product development.

ReactiveSearch Time Savings: Go Live In Days 🚀

ReactiveSearch provides scaffolding to build production ready data-driven apps much like Bootstrap and Materialize provide scaffolding to build styles for your website.

We have implemented the above flow over a dozen times using Reactive Search now, and have consistently shipped a production ready UI in timeframe ranging from few days to sometimes even less than a day.

Image: Display of all the UI components that are available.

You can also get our sketch playground template for designing accurate UI flows that use Reactivesearch.

We recommend appbase.io as the place to start experimenting with your Elasticsearch data, it is completely free for datasets of up to 10,000 records, and we have built a plethora of tools that work well with it to support the data-driven app workflow.

2. Using ReactiveSearch for building the UI components should be a breeze, and we will make it right if you find otherwise.

• The components handle both the view and state changes directly by connecting with database fields (Elasticsearch in this case),
• 90% of the common querying use-cases are handled using declarative component props. As an example, you can write a search bar UI with an auto-suggestions query using this:

<DataSearch
    componentId="searchUI"
    dataField="places"
    autoSuggest={false}
/>

Image: DataSearch component

• There are 20+ different UI components (and growing) to pick from. From simple text fields to calendars to advanced search UIs: we have it all.

3. The components have already been used in a variety of production scenarios and handle several edge cases.

• Whenever some components are composed together to form a single result view UI, they only register on query on the network. Queries are only made intelligently when there is an actual change in the state.
• Components can be extended with custom styles, allow setting a custom query where one can directly plug in a DSL query, or connect with other external libraries with callback events.

How To Get Started

1. Install it via: npm install @appbaseio/reactivesearch
2. The ReactiveSearch starter app
3. 13 mins read — Building a Yelp-like Search UI
4. Reactive Search Documentation Reference
5. Interactive component playground

Go ★ the project on Github so you can find it when you need to build that awesome search!