# reactivesearch

**Repository Path**: abcdkid/reactivesearch

## Basic Information

- **Project Name**: reactivesearch
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-17
- **Last Updated**: 2021-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h2 align="center">
  <img src="https://i.imgur.com/iiR9wAs.png" alt="reactivesearch" title="reactivesearch" width="200" />
  <br />
  Reactive Search
  <br />
</h2>

<p align="center" style="font-size: 1.2rem">A React, React Native and Vue.JS UI components library for Elasticsearch</p>
<p align="center">
Read how to build an e-commerce search UI</p>
<p align="center">
a.) <a href="https://codeburst.io/how-to-build-an-e-commerce-search-ui-with-react-and-elasticsearch-a581c823b2c3"> with React</a>, or b.) <a href="https://hackernoon.com/building-an-e-commerce-search-app-with-react-native-2c87760a2315">with React Native</a>.</p>
<br/>
<p align="center">
  <a href="https://github.com/appbaseio/reactivesearch/tree/dev/packages/web" style="padding: 10px; display: inline-block;"><img src="https://i.imgur.com/7Ax3vpI.png" alt="web" title="web" /></a>
  <a href="https://github.com/appbaseio/reactivesearch/tree/dev/packages/vue" style="padding: 10px; display: inline-block;"><img src="https://i.imgur.com/tIyjPOa.png" alt="vue" title="vue" /></a>
  <a href="https://github.com/appbaseio/reactivesearch/tree/dev/packages/native" style="padding: 10px; display: inline-block;"><img src="https://i.imgur.com/O5XvNXN.png" alt="native" title="native" /></a>
  <a href="https://github.com/appbaseio/reactivesearch/tree/dev/packages/maps" style="padding: 10px; display: inline-block;"><img src="https://i.imgur.com/ze2wvCa.png" alt="maps" title="maps" /></a>
</p>

<hr />

[![](https://img.shields.io/badge/license-Apache%202-blue.svg)](https://github.com/appbaseio/reactivesearch/blob/dev/LICENSE)
[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/appbaseio/reactivesearch)
[![npm](https://img.shields.io/npm/dt/@appbaseio/reactivesearch.svg)](https://www.npmjs.com/package/@appbaseio/reactivesearch)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/appbaseio/reactivesearch/blob/dev/.github/CONTRIBUTING.md)
[![Mentioned in Awesome React](https://awesome.re/mentioned-badge.svg)](https://github.com/enaqx/awesome-react)
[![Mentioned in Awesome Elasticsearch](https://awesome.re/mentioned-badge.svg)](https://github.com/dzharii/awesome-elasticsearch)

<br />


![Banner Image showing all the web UI components we offer](https://i.imgur.com/bJ1QKZS.png)

[Web designer templates for sketch](https://opensource.appbase.io/reactivesearch/resources/ReactiveSearch_Playground.sketch).

![Banner Image showing all the mobile UI components we offer](https://i.imgur.com/13TvjbE.png)

[iOS and Android designer templates for sketch](https://opensource.appbase.io/reactivesearch/resources/ReactiveSearch_Playground.sketch).


<br />

## TOC

1. **[ReactiveSearch: Intro](#1-reactivesearch-intro)**
2. **[Features](#2-features)**
3. **[Component Playground](#3-component-playground)**
4. **[Live Examples](#4-live-demos)**
5. **[Comparison with Other Projects](#5-comparison-with-other-projects)**
6. **[Installation](#6-installation)**
7. **[Docs Manual](#7-docs-manual)**
8. **[Contributing](#8-contributing)**
9. **[Other Projects You Might Like](#9-other-projects-you-might-like)**

<br />

## 1. ReactiveSearch: Intro

ReactiveSearch is an Elasticsearch UI components library for React and React Native. 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 built for applying a specific filter on the data. For example:

* A [`SingleList`](https://opensource.appbase.io/reactive-manual/list-components/singlelist.html) sensor component applies an exact match filter based on the selected item.
* A [`RangeSlider`](https://opensource.appbase.io/reactive-manual/range-components/rangeslider.html) component applies a numeric range query based on the values selected from the UI.
* A [`DataSearch`](https://opensource.appbase.io/reactive-manual/search-components/datasearch.html) 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.

<br />

## 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`](https://opensource.appbase.io/reactive-manual/theming/themes.html).

### Ease of Use

* One step installation with [npm i @appbaseio/reactivesearch](https://opensource.appbase.io/reactive-manual/v1/getting-started/reactivesearch.html),
* A UMD build that works directly in the browser. Installation steps [here](https://opensource.appbase.io/reactive-manual/getting-started/reactivesearch.html#reactivesearch-as-umd),
* Styled and scoped components that can be easily extended,
* See the [reactivesearch starter app](https://github.com/appbaseio-apps/reactivesearch-starter-app).

[⬆ Back to Top](#reactive-search)

<br />

## 3. Component Playground

Try the live component playground at [playground](https://opensource.appbase.io/playground/?filterBy=ReactiveSearch&selectedKind=Range%20components%2FRatingsFilter). Look out for the knobs section in the playground part of the stories to tweak each prop and see the effects.

<br />

## 4. Live Demos

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

### Web

- [demos/airbeds](https://opensource.appbase.io/reactivesearch/demos/airbeds/) - An airbnb-like booking search experience.
- [demos/technews](https://opensource.appbase.io/reactivesearch/demos/technews/) - A full-text search app on the Hacker News dataset.
- [demos/gitxplore](https://opensource.appbase.io/reactivesearch/demos/gitxplore/) - Explore all the popular Github repositories.
- [demos/productsearch](https://opensource.appbase.io/reactivesearch/demos/producthunt/) - Filtered feed of products based on a small Product Hunt dataset.
- [demos/booksearch](https://opensource.appbase.io/reactivesearch/demos/goodbooks/) - An book search app based on a goodbooks dataset.
- [demos/ecommerce](https://opensource.appbase.io/reactivesearch/demos/ecommerce/) - An e-commerce car store app.

You can check all of them on the [examples section of website](https://opensource.appbase.io/reactivesearch/#examples).

### Mobile

- [Booksearch on Play Store](https://play.google.com/store/apps/details?id=com.booksnative): A booksearch app showing a searchable collection of over 10k books built with ReactiveSearch. Also available as a snack.
- [Gitxplore on Play Store](https://play.google.com/store/apps/details?id=com.appbaseio.gitxplore): A Github repository explorer app to  search over the 25k+ most popular github repos.  
- [ReactiveTodos on App Store](https://itunes.apple.com/us/app/reactivetodos/id1347926945?mt=8): A shared collaborative to-do list app to showcase the capability of Reactivesearch.

[⬆ Back to Top](#reactive-search)

<br />

## 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. | 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, Vue for Web, React Native for mobile. | 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](#reactive-search)

<br />

## 6. Installation

Installing ReactiveSearch is just one command.

* If you're using reactivesearch for web

```javascript
npm install @appbaseio/reactivesearch
```

You can check out the quickstart guide with React [here](https://opensource.appbase.io/reactive-manual/getting-started/reactivesearch.html).

* If you're using reactivesearch for mobile (native)

```javascript
npm install @appbaseio/reactivesearch-native
```

You can check out the quickstart guide with React Native [here](https://opensource.appbase.io/reactive-manual/native/getting-started/reactivesearch.html).

<br />


## 7. Docs Manual

The official docs for the Web library are at [opensource.appbase.io/reactive-manual](https://opensource.appbase.io/reactive-manual).

The components are divided into four sections:
* Generic UI components are at [reactive-manual/base-components](https://opensource.appbase.io/reactive-manual/base-components/textfield.html).
* List based UI components are at [reactive-manual/list-components](https://opensource.appbase.io/reactive-manual/list-components/singlelist.html).
* Range based UI components are at [reactive-manual/range-components](https://opensource.appbase.io/reactive-manual/range-components/singlerange.html).
* Search UI components are at [reactive-manual/search-components](https://opensource.appbase.io/reactive-manual/search-components/datasearch.html).
* Result components are at [reactive-manual/result-components](https://opensource.appbase.io/reactive-manual/result-components/resultlist.html).

Docs for React Native version of the library are available at [opensource.appbase.io/reactive-manual/native](https://opensource.appbase.io/reactive-manual/native).

[⬆ Back to Top](#reactive-search)

<br />

## 8. Contributing

Please check the [contribution guide](.github/CONTRIBUTING.md).

<br />

## 9. Other Projects You Might Like

- [**dejavu**](https://github.com/appbaseio/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**](https://github.com/appbaseio/mirage) ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.

- [**ReactiveSearch Dashboard**](https://dashboard.appbase.io/reactivesearch/) All your Reactive Search related apps (created via interactive tutorial, shared by others, etc.) can be accessed from here.
- [**ReactiveMaps**](https://github.com/appbaseio/reactivemaps) is a similar project to Reactive Search that allows building realtime maps easily.

- [**appbase-js**](https://github.com/appbaseio/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.

[⬆ Back to Top](#reactive-search)

<a href="https://appbase.io/pricing#support/"><img src="https://i.imgur.com/UL6B0uE.png" width="100%" /></a>