ReactiveSearch: UI components for building Amazon / Yelp like search

**Image:** Reactive Search’s UI components

Edit: Reactive Search got hunted on https://producthunt.com/posts/reactive-search.

We’re excited to launch Reactive Search — a UI & data components library for building amazing search experiences.

It lets you build search focused UIs similar to Amazon’s, Yelp’s or Airbnb’s. How do we know? Because we built companion apps to build these UIs.

Tap on the example to try out the live app!

Airbeds creates an Airbnb like search experience. It lets you:

Filter by calendar dates, number of guests, types of rooms, price range.
Apply an additional full-text query.
Show the matching results in both card and map views.

Tap on the image to try out the live app!

Yelp Search allows you to filter restaurants by a variety of search criteria and displays the matching results in both a list and a map view.

Check out our other apps for Meetup, E-Commerce, Hacker News and Product Hunt searches at https://opensource.appbase.io/reactivesearch/examples/.

Why use this vs build it yourself?

First, it saves several days of work by providing boilerplate UI components that you will likely need while designing a search experience. Currently, Reactive Search has over 25 different kinds of components.
UI & data: These components are connected to appbase.io, a hosted realtime DB service built on top of Elasticsearch. Configuring, optimizing and maintaining a search engine backend is not easy, we know this firsthand! If you use Reactive Search, we’ve got you covered here.
Writing server side code is optional! From the first minute, you can focus on crafting the best possible user experience without letting configuration get in the way.
Components come with sensible UI and data defaults that work out of the box 90% of the times. Take a DataSearch component for instance.

<DataSearch
  componentId="MainSearchbox",
  appbaseField={["name", "title"]},
  highlight={true}
  autocomplete={true}
  placeholder="Search by name or title"
/>

**Image:** UI of the DataSearch component

In these six lines, we created a full-text search query on multiple fields with an autocompletion and highlighting support. Not to mention the searchbox UI widget to display the results.

Want to optimize the query further or just change it completely? Just add a customQuery prop and it will now accept any valid query formed using the Elasticsearch’s query DSL.
Don’t like the default styles? No problem. componentStyle lets you add your own CSS styles with each component. Besides, the components adhere to a consistent CSS guide that is easy to override.
Have a codebase that doesn’t use React or want the components to work with other libraries? No problem. onValueChange prop calls your JS function every time the component’s value has changed.
Have many filters in your search app and need to create a combined query on all those filters together? No problem. react prop, Reactive Search’s way of composing queries has got you covered here.

Let’s see how to do this in our above declared DataSearch component.

<DataSearch
  ..
  react: {{
    "and": ["ListFilter", "PriceFilter"]
  }}
/>

Now every time you search, ReactiveSearch will add the query context of these two components along so that only results that match all are shown. What happens if the price filter’s value changes by a user action? The next search query will use that updated value to filter results. We call this concept reactive chaining! The library handles this for you.

See DataSearch component’s documentation to read more on what you can do with it.

Tap on the image to build a Hacker News search app in 5 mins!

If all of this sounds too good to be true, see it for yourself in this interactive tutorial to build a Hacker News search app.

Or go straight to the docs — opensource.appbase.io/reactive-manual.

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