@appbaseio/reactivesearch

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.