ReactiveSearch Documentation

ReactiveMaps provides Elasticsearch UI components for building data-driven Map UIs. It connects Google Maps components with your Elasticsearch cluster and enables communication with other reactive components.

Key features include:

• Dynamic evaluation of map centers as the map updates.
• Ability to search on the map as it is moved.
• Integration with streaming enhancements for building real-time map applications.

ReactiveSearch is a UI components library for React and Vue designed to work with Elasticsearch, OpenSearch, Solr, and MongoDB. It provides over 20 UI components including Lists, Ranges, Search UIs, Result displays, AI Answers, and Charts.

Key components include:

• Sensors: Components like SingleList, RangeSlider, and SearchBox that apply filters or search queries based on user interaction.
• Result Displays: Components that render the matching hits, such as ReactiveList (list/card formats), ReactiveMap (Google Maps or OpenStreetMaps), AIAnswer (RAG via OpenAI), and ReactiveChart (Apache E-Charts).

Components can be configured to react to one another using the react prop.

ReactiveSearch is built around two primary types of components:

1. Sensor components: Purpose-built components for applying specific filters to your data. For example, a SingleList component renders a list of radio UI elements based on the available dataset to filter results.

2. Actuator components: Components that represent the resulting UI view.

   • ResultCard: Displays results in a card-based interface.
   • ResultList: Displays results in a list format.
   • Both ResultCard and ResultList include built-in support for pagination and infinite scroll.
   • ReactiveComponent and ReactiveList: Low-level actuators provided for highly customized rendering.

ReactiveMaps relies on two main types of components:

1. Map component: The ReactiveMap component is the primary data-driven map UI component used to build map-based experiences.
2. Complimentary sensor components: In addition to standard ReactiveSearch sensor components, ReactiveMaps is compatible with:
   • GeoDistanceSlider
   • GeoDistanceDropdown

ReactiveMaps Native provides several key capabilities for mobile developers:

• Elasticsearch Integration: Works out of the box with an Elasticsearch index or appbase.io service.
• Cross-platform: Components are designed for both iOS and Android.
• Customization: Supports bringing your own design components and provides full theming support (built with primitives from NativeBase.io).
• Real-time capabilities: Integrates streaming enhancements to allow for seamless real-time map applications.
• Accessibility: Built with accessibility in mind.

ReactiveSearch Vue components are organized into four main functional categories:

• List based UI components: For displaying lists of items.
• Range based UI components: For filtering data within specific ranges.
• Search UI components: For text-based search input.
• Result components: For displaying search results (e.g., ReactiveList).

To run the native example project on a physical device or emulator, follow these steps:

1. Clone the repository and navigate to the packages/native/example directory.
2. Install dependencies using yarn.
3. Start the packager using yarn start.
4. Use the Expo app to scan the provided QR code to load the application on your device.

To use ReactiveSearch Vue components in your project, install the package using yarn:

yarn add @appbaseio/reactivesearch-vue

To use ReactiveSearch in your React project, install the package using yarn:

yarn add @appbaseio/reactivesearch

To use ReactiveSearch in a React project, install the @appbaseio/reactivesearch package via npm.

npm install @appbaseio/reactivesearch

To start developing a data-driven mobile app with ReactiveSearch for React Native, install the package via npm:

npm install @appbaseio/reactivesearch-native