karuppasamy / reactivesearch

A React components library for building awesome :mag: search UIs

Reactive Search

React UI components for Elasticsearch.

v2 of reactivesearch is here 🍾. Go read how to build an e-commerce search UI on codeburst.

🚀 npm install @appbaseio/reactivesearch

Get our designer templates for sketch.

TOC

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

1. ReactiveSearch: Intro

ReactiveSearch is a React UI components library for Elasticsearch. It has 25+ components consisting of Lists, Ranges, Search UIs, Result displays and a way to bring any existing UI component into the library.

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 DataSearch component applies a suggestions and search query based on the search term typed by the user.

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 (ReactiveComponent and 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 scoped and styled components. Doesn't require any external CSS library import, comes with className and innerClass support.
• Is themable via ThemeProvider.

Ease of Use

• One step installation with npm install @appbaseio/reactivesearch,
• A UMD build that works directly in the browser. Installation steps here,
• Styled and scoped components that can be easily extended,
• 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 Demos

A set of live demos inspired by real world apps, built with ReactiveSearch.

• demos/airbeds - An airbnb-like booking search experience.
• demos/technews - A full-text search app on the Hacker News dataset.
• demos/gitxplore - Explore all the popular Github repositories.
• demos/productsearch - Filtered feed of products based on a small Product Hunt dataset.
• demos/booksearch - An book search app based on a goodbooks dataset.
• demos/ecommerce - An e-commerce car store app.

You can check all of them on the examples section of website.

⬆ Back to Top

5. Comparison with Other Projects

Here, we share how ReactiveSearch compares with other projects that have similar aims.

#	ReactiveSearch	SearchKit	InstantSearch
Backend	Any Elasticsearch index hosted on any Elasticsearch cluster.	Any Elasticsearch index hosted on any Elasticsearch cluster.	Custom-built for Algolia, a proprietary search engine.
Development	Actively developed and maintained.	Active issue responses, some development and maintenance.	Actively developed and maintained.
Onboarding Experience	Starter apps, Live interactive tutorial, getting started guide, component playground, every component has a live working demo with codesandbox.	Getting started tutorial, no live component demos, sparse reference spec for many components.	Starter apps, getting started guide, component playground.
Styling Support	Styled and scoped components. No external CSS import required. Rich theming supported as React props.	CSS based styles with BEM, not scoped to components. Theming supported with SCSS.	CSS based styles, requires external style import. Theming supported by manipulating CSS.
Types of Components	Lists, Ranges, Search, Dates, Maps*, Result Displays. Can use your own UI components. (Maps need an upgrade)	Lists, Ranges, Search*, Result*. Can't use your own UI components. (Only one component for Search and Result, resulting in more code to be written for customizability)	Lists, Range, Search, Result. Can use your own UI components.
Supported Distribution Platforms	React for Web, React Native for mobile in alpha and actively developed.	React for Web.	React, Vue, Angular, vanilla JS for Web, React Native for mobile but latter has no UI components.

We welcome contributions to this section. If you are building a project or you know of another project that is in the similar space, let us know and we will update the comparisons.

⬆ Back to Top

6. Installation

Installing ReactiveSearch is just one command.

npm install @appbaseio/reactivesearch

You can also read about it here.

7. Getting Started

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

8. Docs Manual

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

The components are divided into four sections:

• Generic UI components are at reactive-manual/base-components.
• List based UI components are at reactive-manual/list-components.
• Range based UI components are at reactive-manual/range-components.
• Search UI components are at reactive-manual/search-components.
• Result components are at reactive-manual/result-components.

⬆ Back to Top

9. Developing Locally

1. Clone the repo

git clone https://github.com/appbaseio/reactivesearch.git

2. cd into the project directory

3. Checkout the dev branch (should be default)

4. fetch the submodules. In case you don't have ssh setup for github, change the URLs in .gitmodules to use https instead

git submodule init
git submodule sync
git submodule update --remote

5. The submodules will be fetched into /packages. Defaults to dev in /packages/playground and master in /packages/reactivecore.

10. 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