appbaseio / reactivesearch

Reactive Search UI components library for Elasticsearch, OpenSearch, Solr, MongoDB: Available for React and Vue Read how to build an e-commerce search UI a.) with React , or b.) with Vue Check out Searchbox if you're building search UIs for other JS frameworks, React Native or Flutter. Check out the ReactiveSearch marketplace at reactiveapps.io . Web designer templates for sketch. iOS and Android designer templates for sketch. TOC • **ReactiveSearch: Intro** • **Features** • **Component Playground** • **Live Examples** • **Comparison with Other Projects** • **Installation** • **Docs Manual** • **Contributing** • **Other Projects You Might Like** • ReactiveSearch: Intro ReactiveSearch is a UI components library for React and Vue, designed to work with ReactiveSearch cloud. It has over 20 UI components consisting of Lists, Ranges, Search UIs, Result displays, AI Answer, Charts, and a way to bring an existing UI component into the library. A UI component can be used for filtering or searching on the index. For example: • A sensor component applies an exact match filter based on the selected item. • A component applies a numeric range query based on the values selected from the UI. • A component applies a suggestions and search query based on the search term typed by the user. UI components can be used together ( prop allows configuring this on a per-component level) and render the matching results via a result display UI component. **ReactiveSearch** supports the following built-in display components for displaying results (aka hits): • ReactiveList - ReactiveList supports list and card display formats as well as allows custom rendering at both item and component level, • ReactiveMap - ReactiveMap offers choice of Google Maps and OpenStreetMaps for map rendering, • AIAnswer - AIAnswer offers Retrieval Augmented Generation (RAG) via search engine and OpenAI models, and • ReactiveChart - Powered by Apache E-Charts, ReactiveChart offers 5 built-in chart types: pie, bar, histogram, line, scatter, and additional charts in the Apache E-Charts format. ReactiveChart is only supported for React at this time. • Features Design • The UI components's query generation and ability to allows for creating complex UIs where a number of UI components can reactively update based on user interaction. • The library handles the transformation of the UI interactions into search intent queries. • Comes with scoped and styled components with innerClass ThemeProvider enableAppbase true ReactiveBase ReactiveSearch API ReactiveSearch` compares with other projects that have similar aims. | **#** | **ReactiveSearch** | **SearchKit** | **InstantSearch** | | -----------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: | | **Backend** | Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI | 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. ⬆ Back to Top • Installation Installing ReactiveSearch is just one command. • If you're using reactivesearch for React You can check out the quickstart guide with React here. • If you're using reactivesearch for Vue You can check out the quickstart guide with Vue here. • Docs Manual The official docs for the React library are at docs.reactivesearch.io/docs/reactivesearch/react. The components are divided into four sections: • List based UI components are at reactivesearch/react/list. • Range based UI components are at reactivesearch/react/range. • Search UI components are at reactivesearch/react/search. • Result components are at reactivesearch/react/result. • Map components are at reactivesearch/react/map. • Chart components are at reactivesearch/react/chart. Docs for Vue version of the library are available at docs.reactivesearch.io/docs/reactivesearch/vue. ⬆ Back to Top • Contributing Please check the contribution guide. • Other Projects You Might Like • **ReactiveSearch API** API Gateway for ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (Out of the box Security, Rate Limit Features, Record Analytics and Request…