Reactivesearch

<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">UI components library for Elasticsearch, OpenSearch, Solr, MongoDB: Available for React and Vue</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-a-yelp-like-search-app-using-react-and-elasticsearch-36a432bf6f92"> with React</a>, or b.) <a href="https://medium.appbase.io/building-booksearch-application-using-vue-and-elasticsearch-a39615f4d6b3">with Vue</a> <br/> <p align="center"> <a href="https://github.com/appbaseio/reactivesearch/tree/next/packages/web" style="padding: 10px; display: inline;"><img width="30%" src="https://docs.reactivesearch.io/images/react.jpeg" alt="web" title="web" /></a> <a href="https://github.com/appbaseio/reactivesearch/tree/next/packages/vue" style="padding: 10px; display: inline;"><img width="30%" src="https://docs.reactivesearch.io/images/vue.png" alt="vue" title="vue" /></a> </p>

Check out Searchbox if you're building search UIs for other JS frameworks, React Native or Flutter.

<hr />

<br /> <p>Check out the ReactiveSearch marketplace at <a href="https://reactiveapps.io/" target="_blank">reactiveapps.io</a>.</p> <br />

Web designer templates for sketch.

iOS and Android designer templates for sketch.

<br />

TOC

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

<br />

1. ReactiveSearch: Intro

ReactiveSearch is a UI components library for React and Vue, designed to work with ReactiveSearch cloud. It has over 20 UI components consisting of Lists, Ranges, Search UIs, Result displays, AI Answer, Charts, and a way to bring an existing UI component into the library.

A UI component can be used for filtering or searching on the index. 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 SearchBox component applies a suggestions and search query based on the search term typed by the user.

UI components can be used together (react prop allows configuring this on a per-component level) and render the matching results via a result display UI component.

ReactiveSearch supports the following built-in display components for displaying results (aka hits):

1. ReactiveList - ReactiveList supports list and card display formats as well as allows custom rendering at both item and component level,
2. ReactiveMap - ReactiveMap offers choice of Google Maps and OpenStreetMaps for map rendering,
3. AIAnswer - AIAnswer offers Retrieval Augmented Generation (RAG) via search engine and OpenAI models, and
4. ReactiveChart - Powered by Apache E-Charts, ReactiveChart offers 5 built-in chart types: pie, bar, histogram, line, scatter, and additional charts in the Apache E-Charts format. ReactiveChart is only supported for React at this time.

<br />

2. Features

Design

• The UI components's query generation and ability to react allows for creating complex UIs where a number of UI components can reactively update based on user interaction.
• The library handles the transformation of the UI interactions into search intent queries.
• Comes with scoped and styled components with className`` and innerClass` prop support.
• Is themable via ThemeProvider.

Ease of Use

• One step installation with npm i @appbaseio/reactivesearch,
• Styled and scoped components that can be easily extended,
• See the reactivesearch starter app.

🆕 ReactiveSearch API: Secure your Search Queries

Starting ReactiveSearch v4 (current major release), the library only sends the search intent, specification for this is here - ReactiveSearch API ref. Based on the choice of search engine you configure in ReactiveSearch cloud, the search query DSL is then generated by ReactiveSearch cloud. This approach is both more secure as well as allows transfering the search business logic on the server-side.

If you're using ReactiveSearch v3 (last major release), use of ReactiveSearch API over ElasticSearch's query DSL is an opt-in feature. You need to set the enableAppbase prop as true in your ReactiveBase component. This assumes that you are using appbase.io for your backend.

We recommend checking out this KitchenSink App that demonstrates the use of the ReactiveSearch API for all the ReactiveSearch components.

⬆ Back to Top

<br />

3. Component Playground

Try the live component playground stories at playground. 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/booksearch - An book search app based on a goodbooks dataset.
• BookSearch with Antd - A demo showing use of Ant design's theming and UI components with ReactiveSearch
• E-commerce Movie Search - A demo showing an e-commerce movie search UI
• Dashboard search and charts - A demo with user authentication: login, search and charts UIs.

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

⬆ Back to Top

<br />

5. Comparison with Other Projects

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

| # | ReactiveSearch | SearchKit | InstantSearch | | -----------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: | | Backend | Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI | Any Elasticsearch index hosted on any Elasticsearch cluster. | Custom-built for Algolia, a proprietary search engine. | | Development | Actively developed and maintained. |