ReactiveSearch
Elasticsearch UI components for React. Website
Read how to build an Airbnb clone with ReactiveSearch.
React UI components for Elasticsearch.
Get our designer templates for sketch.
Installation
yarn add @appbaseio/reactivesearch
Concepts
The library is conceptually divided into two parts:
1. Sensor components
Each sensor component is purpose built for applying a specific filter on the data. For example: Rendering a Radio UI elements list based on the available dataset - SingleList
2. Actuator components
Actuators represent the result UI view components. 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.
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.
Documentation
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.
Changelog
Check out the changelog for more info.
Related tooling and projects
-
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.
