Reactive Search

A React components library for building Airbnb / Yelp like search experiences.

TOC

1. Reactive Search: Intro
2. Features
3. Component Playground
4. Live Examples
5. Installation
6. Getting Started
7. Docs Manual
8. Developing Locally
9. Other Projects You Might Like

1. Reactive Search: Intro

Reactive Search is a React components library for building realtime search experiences. It is built on top of the appbase.io realtime DB service and ships with 25+ components for Lists, Dropdowns, Range Sliders, Data Search, Multi Level Menu, Calendars, Feeds Maps, Ratings Filter, Result Cards and Result Lists.

The library is conceptually divided into two parts:

1. Sensor components and
2. Actuator components.

Each sensor component is purpose built for applying a specific filter on the data. For example:

• A SingleList sensor component applies an exact match filter based on the selected item.
• A RangeSlider component applies a numeric range query based on the values selected from the UI.
• A RatingsFilter component conveniently applies a ★ ratings filter on a dataset containing ratings like data.

Sensor components can be configured to create a combined query context and render the matching results via an actuator component.

ReactiveSearch primarily comes with two actuators: ResultCard and ResultList. ResultCard displays the results in a card interface whereas ResultList displays them in a list. Both provide built-in support for pagination and infinite scroll views.

Besides these, the library also provides low level actuators (ReactiveElement, ReactiveList) to render in a more customized fashion.

2. Features

Design

• The sensor / actuator design pattern allows creating complex UIs where any number of sensors can be chained together to reactively update an actuator (or even multiple actuators).
• The library handles the transformation of the UI interactions into database queries. You only need to include the components and associate each with a DB field.
• Built in live updates - Actuators can be set to update results even when the underlying data changes in the DB.
• Comes with a cleanly namespaced CSS classes API that allows extending built-in styles without hassle.
• Built in light and dark UI themes.

Ease of Use

• One step installation with npm install @appbaseio/reactivesearch,
• A UMD build that works directly in the browser. See a demo here,
• Works out of the box with Materialize CSS and comes with a polyfill CSS for Bootstrap. Compatibility for other frameworks can be added too,
• See the reactivesearch starter app.

⬆ Back to Top

3. Component Playground

Try the live component playground at playground. Look out for the knobs section in the playground part of the stories to tweak each prop and see the effects.

4. Live Examples

A set of examples built with ReactiveSearch and inspired by real world apps.

• examples/airbeds - An airbnb-like booking search experience.
• examples/news - A full-text search app on the Hacker News dataset.
• examples/whosintown - A live feed of meetup RSVPs based on topics, location and distance filters.
• examples/productsearch - Filtered feed of products based on a small Product Hunt dataset.
• examples/ecommerce - An e-commerce car store app built with ReactiveSearch.
• examples/yelpsearch - A yelp-like app for finding local eateries.

You can check all of them on the examples page.

⬆ Back to Top

5. Installation

Installing ReactiveSearch is just one command.

npm i @appbaseio/reactivesearch

and another to add the stylesheets in the html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/appbaseio/reactivesearch/master/dist/css/style.min.css">

You can also read about it here.

(In the works) You can try out the library live without any installation via the interactive tutorial.

6. Getting Started

Follow the getting started guide to build a Hello Maps! app from the official docs here.

7. Docs Manual

The official docs for the library are at https://opensource.appbase.io/reactive-manual.

The components are divided into two sections:

• Generic UI components are at https://opensource.appbase.io/reactive-manual/v1/components.
• Map based UI components are at https://opensource.appbase.io/reactive-manual/v1/map-components.
• Each component's styles API is mentioned in a separate CSS Styles API section. See here for SingleList.
• You can read more about the Styles API here - https://opensource.appbase.io/reactive-manual/v1/advanced/StyleGuide.html.

⬆ Back to Top

8. Developing Locally

git clone https://github.com/appbasieo/reactivesearch
npm install (or yarn)

Start the development server on port 8000.

npm start (or yarn start)

Examples can be accessed at https://localhost:8000/examples.

9. Other Projects You Might Like

• ReactiveSearch Dashboard All your Reactive Search related apps (created via interactive tutorial, shared by others, etc.) can be accessed from here.

• ReactiveMaps is a similar project to Reactive Search that allows building realtime maps easily.

• appbase-js While building search UIs is dandy with Reactive Search, you might also need to add some input forms. appbase-js comes in handy there.

• dejavu allows viewing raw data within an appbase.io (or Elasticsearch) app. Soon to be released feature: An ability to import custom data from CSV and JSON files, along with a guided walkthrough on applying data mappings.

• mirage ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.

⬆ Back to Top