@appbaseio/reactivesearch

ReactiveSearch

Elasticsearch UI components for React. Website 🌐

Read how to build an Airbnb clone with ReactiveSearch.


React UI components for Elasticsearch.

!Banner Image showing all the UI components we offer

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.