UI components library for Elasticsearch: Available for React, Vue and React Native
Read how to build an e-commerce search UI
a.) with React, b.) with Vue or c.) with React Native.
Check out the ReactiveSearch marketplace at reactiveapps.io.
Web designer templates for sketch.
iOS and Android designer templates for sketch.
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:
Each sensor component is built for applying a specific filter on the data. For example:
SingleList
sensor component applies an exact match filter based on the selected item.RangeSlider
component applies a numeric range query based on the values selected from the UI.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.
ThemeProvider
.Based on a popular request, we have implemented support for a declarative API based on ReactiveSearch. The API is called ReactiveSearch API. It moves the query DSL generation logic to a backend system (an appbase.io service) instead of exposing it directly on the client-side. By strictly enabling only ReactiveSearch API use, you can also prevent script injections.
The main advantages of using it over the ElasticSearch Query DSL are:
Using ReactiveSearch API instead of 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.
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.
A set of live demos inspired by real world apps, built with ReactiveSearch.
You can check all of them on the examples section of website.
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.
Installing ReactiveSearch is just one command.
npm install @appbaseio/reactivesearch
You can check out the quickstart guide with React here.
npm install @appbaseio/reactivesearch-native
You can check out the quickstart guide with React Native here.
The official docs for the Web library are at docs.appbase.io/docs/reactivesearch/v3.
The components are divided into four sections:
Docs for React Native version of the library are available at docs.appbase.io/docs/reactivesearch/native.
Please check the contribution guide.
arc API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).
searchbox A lightweight and performance focused searchbox UI libraries to query and display results from your ElasticSearch app (aka index).
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.
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.
Author: appbaseio
GitHub: https://github.com/appbaseio/reactivesearch
#vuejs #javascript #vue-js #reactjs #react-native