{"id":13400733,"url":"https://github.com/appbaseio/reactivesearch","last_synced_at":"2025-05-13T15:05:11.087Z","repository":{"id":37390845,"uuid":"82074611","full_name":"appbaseio/reactivesearch","owner":"appbaseio","description":"Search UI components for React and Vue","archived":false,"fork":false,"pushed_at":"2025-03-10T10:17:22.000Z","size":370487,"stargazers_count":4910,"open_issues_count":167,"forks_count":472,"subscribers_count":61,"default_branch":"next","last_synced_at":"2025-04-30T16:50:26.895Z","etag":null,"topics":["data-components","developer-tools","elasticsearch","hacktoberfest","hacktoberfest2022","live-demos","react","react-components","reactive-search","reactivesearch","reactivesearch-api","search","search-ui","searchbox","ui-components","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://opensource.reactivesearch.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appbaseio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-15T15:21:24.000Z","updated_at":"2025-04-29T09:56:56.000Z","dependencies_parsed_at":"2024-02-21T18:46:10.269Z","dependency_job_id":"7ac5e41b-a417-478b-8b1c-689f75e8d389","html_url":"https://github.com/appbaseio/reactivesearch","commit_stats":{"total_commits":4733,"total_committers":79,"mean_commits":59.91139240506329,"dds":0.7669554193957321,"last_synced_commit":"3a5c9ee67e3a7ecc07d434e24906365208645977"},"previous_names":[],"tags_count":384,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Freactivesearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Freactivesearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Freactivesearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Freactivesearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appbaseio","download_url":"https://codeload.github.com/appbaseio/reactivesearch/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252551806,"owners_count":21766598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-components","developer-tools","elasticsearch","hacktoberfest","hacktoberfest2022","live-demos","react","react-components","reactive-search","reactivesearch","reactivesearch-api","search","search-ui","searchbox","ui-components","vue","vue-components"],"created_at":"2024-07-30T19:00:55.025Z","updated_at":"2025-05-05T18:24:33.224Z","avatar_url":"https://github.com/appbaseio.png","language":"JavaScript","readme":"\u003ch2 align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/iiR9wAs.png\" alt=\"reactivesearch\" title=\"reactivesearch\" width=\"200\" /\u003e\n  \u003cbr /\u003e\n  Reactive Search\n  \u003cbr /\u003e\n\u003c/h2\u003e\n\n\u003cp align=\"center\" style=\"font-size: 1.2rem\"\u003eUI components library for Elasticsearch, OpenSearch, Solr, MongoDB: Available for React and Vue\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nRead how to build an e-commerce search UI\u003c/p\u003e\n\u003cp align=\"center\"\u003e\na.) \u003ca href=\"https://codeburst.io/how-to-build-a-yelp-like-search-app-using-react-and-elasticsearch-36a432bf6f92\"\u003e with React\u003c/a\u003e, or b.) \u003ca href=\"https://medium.appbase.io/building-booksearch-application-using-vue-and-elasticsearch-a39615f4d6b3\"\u003ewith Vue\u003c/a\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/appbaseio/reactivesearch/tree/next/packages/web\" style=\"padding: 10px; display: inline;\"\u003e\u003cimg  width=\"30%\" src=\"https://docs.reactivesearch.io/images/react.jpeg\" alt=\"web\" title=\"web\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/appbaseio/reactivesearch/tree/next/packages/vue\" style=\"padding: 10px; display: inline;\"\u003e\u003cimg   width=\"30%\" src=\"https://docs.reactivesearch.io/images/vue.png\" alt=\"vue\" title=\"vue\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCheck out [Searchbox](https://opensource.appbase.io/searchbox/) if you're building search UIs for other JS frameworks, React Native or Flutter.\n\n\u003chr /\u003e\n\n[![](https://img.shields.io/badge/license-Apache%202-blue.svg)](https://github.com/appbaseio/reactivesearch/blob/dev/LICENSE)\n[![ReactiveSearch Snapshot Tests](https://github.com/appbaseio/reactivesearch/actions/workflows/test.yml/badge.svg)](https://github.com/appbaseio/reactivesearch/actions/workflows/test.yml)\n[![npm](https://img.shields.io/npm/dt/@appbaseio/reactivesearch.svg)](https://www.npmjs.com/package/@appbaseio/reactivesearch)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/appbaseio/reactivesearch/blob/dev/.github/CONTRIBUTING.md)\n[![Mentioned in Awesome React](https://awesome.re/mentioned-badge.svg)](https://github.com/enaqx/awesome-react)\n[![Mentioned in Awesome Elasticsearch](https://awesome.re/mentioned-badge.svg)](https://github.com/dzharii/awesome-elasticsearch)\n\n\u003cbr /\u003e\n\n\u003cp\u003eCheck out the ReactiveSearch marketplace at \u003ca href=\"https://reactiveapps.io/\" target=\"_blank\"\u003ereactiveapps.io\u003c/a\u003e.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n![Banner Image showing all the web UI components we offer](https://i.imgur.com/bJ1QKZS.png)\n\n[Web designer templates for sketch](https://opensource.appbase.io/reactivesearch/resources/ReactiveSearch_Playground.sketch).\n\n![Banner Image showing all the mobile UI components we offer](https://i.imgur.com/13TvjbE.png)\n\n[iOS and Android designer templates for sketch](https://opensource.appbase.io/reactivesearch/resources/ReactiveSearch_Playground.sketch).\n\n\u003cbr /\u003e\n\n## TOC\n\n1. **[ReactiveSearch: Intro](#1-reactivesearch-intro)**\n2. **[Features](#2-features)**\n3. **[Component Playground](#3-component-playground)**\n4. **[Live Examples](#4-live-demos)**\n5. **[Comparison with Other Projects](#5-comparison-with-other-projects)**\n6. **[Installation](#6-installation)**\n7. **[Docs Manual](#7-docs-manual)**\n8. **[Contributing](#8-contributing)**\n9. **[Other Projects You Might Like](#9-other-projects-you-might-like)**\n\n\u003cbr /\u003e\n\n## 1. ReactiveSearch: Intro\n\nReactiveSearch 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.\n\nA UI component can be used for filtering or searching on the index. For example:\n\n-   A [`SingleList`](https://docs.reactivesearch.io/docs/reactivesearch/react/list/singlelist/) sensor component applies an exact match filter based on the selected item.\n-   A [`RangeSlider`](https://docs.reactivesearch.io/docs/reactivesearch/react/range/rangeslider/) component applies a numeric range query based on the values selected from the UI.\n-   A [`SearchBox`](https://docs.reactivesearch.io/docs/reactivesearch/react/search/searchbox/) component applies a suggestions and search query based on the search term typed by the user.\n\nUI components can be used together (`react` prop allows configuring this on a per-component level) and render the matching results via a result display UI component.\n\n**ReactiveSearch** supports the following built-in display components for displaying results (aka hits):\n1. [ReactiveList](https://docs.reactivesearch.io/docs/reactivesearch/react/result/reactivelist/) - ReactiveList supports list and card display formats as well as allows custom rendering at both item and component level,\n2. [ReactiveMap](https://docs.reactivesearch.io/docs/reactivesearch/react/map/reactivegooglemap/) - ReactiveMap offers choice of Google Maps and OpenStreetMaps for map rendering,\n3. [AIAnswer](https://docs.reactivesearch.io/docs/reactivesearch/react/search/aianswer/) - AIAnswer offers Retrieval Augmented Generation (RAG) via search engine and OpenAI models, and\n4. [ReactiveChart](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/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.\n\n\n\u003cbr /\u003e\n\n## 2. Features\n\n### Design\n\n-   The UI components's query generation and ability to `react` allows for creating complex UIs where a number of UI components can reactively update based on user interaction.\n-   The library handles the transformation of the UI interactions into search intent queries.\n-   Comes with scoped and styled components with `className`` and `innerClass` prop support.\n-   Is themable via [`ThemeProvider`](https://docs.reactivesearch.io/docs/reactivesearch/react/theming/overview/).\n\n### Ease of Use\n\n-   One step installation with [npm i @appbaseio/reactivesearch](https://docs.reactivesearch.io/docs/reactivesearch/react/overview/quickstart/),\n-   Styled and scoped components that can be easily extended,\n-   See the [reactivesearch starter app](https://github.com/awesome-reactivesearch/reactivesearch-starter-app).\n\n### 🆕 ReactiveSearch API: Secure your Search Queries\n\nStarting ReactiveSearch v4 (current major release), the library only sends the search intent, specification for this is here - [ReactiveSearch API ref](https://docs.reactivesearch.io/docs/search/reactivesearch-api/). Based on the choice of search engine you configure in ReactiveSearch cloud, the search query DSL is then generated by ReactiveSearch cloud. This approach is both more secure as well as allows transfering the search business logic on the server-side.\n\n\nIf you're using ReactiveSearch v3 (last major release), use of ReactiveSearch API over ElasticSearch's query DSL is an opt-in feature. You need to set the `enableAppbase` prop as `true` in your `ReactiveBase` component. This assumes that you are using appbase.io for your backend.\n\nWe recommend checking out this [KitchenSink App](https://codesandbox.io/s/loving-margulis-p8rd6z) that demonstrates the use of the `ReactiveSearch API` for all the ReactiveSearch components.\n\n[⬆ Back to Top](#------reactive-search--)\n\n\u003cbr /\u003e\n\n## 3. Component Playground\n\nTry the live component playground stories at [playground](https://opensource.appbase.io/playground/?filterBy=ReactiveSearch\u0026selectedKind=Range%20components%2FRatingsFilter). Look out for the knobs section in the playground part of the stories to tweak each prop and see the effects.\n\n\u003cbr /\u003e\n\n## 4. Live Demos\n\nA set of live demos inspired by real world apps, built with ReactiveSearch.\n\n### Web\n\n-  [demos/booksearch](https://opensource.appbase.io/reactivesearch/demos/goodbooks/) - An book search app based on a goodbooks dataset.\n- [BookSearch with Antd](https://antd-booksearch.reactiveapps.io/) - A demo showing use of Ant design's theming and UI components with ReactiveSearch\n- [E-commerce Movie Search](https://movies-ecommerce-demo.reactiveapps.io/) - A demo showing an e-commerce movie search UI\n- [Dashboard search and charts](https://dashboard-app.reactiveapps.io/) - A demo with user authentication: login, search and charts UIs.\n\nYou can check all of them on the [examples section of website](https://opensource.reactivesearch.io/#examples).\n\n\n[⬆ Back to Top](#------reactive-search--)\n\n\u003cbr /\u003e\n\n## 5. Comparison with Other Projects\n\nHere, we share how `ReactiveSearch` compares with other projects that have similar aims.\n\n|                                **#** |                                                               **ReactiveSearch**                                                                |                                                                              **SearchKit**                                                                              |                                         **InstantSearch**                                         |\n| -----------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |\n|                          **Backend** |                                          Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI                                           |                                                      Any Elasticsearch index hosted on any Elasticsearch cluster.                                                       |                      Custom-built for Algolia, a proprietary search engine.                       |\n|                      **Development** |                                                       Actively developed and maintained.                                                        |                                                        Active issue responses, some development and maintenance.                                                        |                                Actively developed and maintained.                                 |\n|            **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.                     |\n|                  **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.      |\n|              **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.                   |\n| **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. |\n\nWe 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.\n\n[⬆ Back to Top](#------reactive-search--)\n\n\u003cbr /\u003e\n\n## 6. Installation\n\nInstalling ReactiveSearch is just one command.\n\n-   If you're using reactivesearch for React\n\n```javascript\nnpm install @appbaseio/reactivesearch\n```\n\nYou can check out the quickstart guide with React [here](https://docs.reactivesearch.io/docs/reactivesearch/react/overview/quickstart/).\n\n-   If you're using reactivesearch for Vue\n\n```javascript\nnpm install @appbaseio/reactivesearch-vue\n```\n\nYou can check out the quickstart guide with Vue [here](https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/).\n\n\u003cbr /\u003e\n\n## 7. Docs Manual\n\nThe official docs for the React library are at [docs.reactivesearch.io/docs/reactivesearch/react](https://docs.reactivesearch.io/docs/reactivesearch/react/overview/quickstart/).\n\nThe components are divided into four sections:\n\n-   List based UI components are at [reactivesearch/react/list](https://docs.reactivesearch.io/docs/reactivesearch/react/list/singlelist/).\n-   Range based UI components are at [reactivesearch/react/range](https://docs.reactivesearch.io/docs/reactivesearch/react/range/singlerange/).\n-   Search UI components are at [reactivesearch/react/search](https://docs.reactivesearch.io/docs/reactivesearch/react/search/datasearch/).\n-   Result components are at [reactivesearch/react/result](https://docs.reactivesearch.io/docs/reactivesearch/react/result/reactivelist/).\n-   Map components are at [reactivesearch/react/map](https://docs.reactivesearch.io/docs/reactivesearch/react/map/geodistanceslider/).\n-   Chart components are at [reactivesearch/react/chart](https://docs.reactivesearch.io/docs/reactivesearch/react/chart/piechart/).\n\nDocs for Vue version of the library are available at [docs.reactivesearch.io/docs/reactivesearch/vue](https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/).\n\n[⬆ Back to Top](#------reactive-search--)\n\n\u003cbr /\u003e\n\n## 8. Contributing\n\nPlease check the [contribution guide](.github/CONTRIBUTING.md).\n\n\u003cbr /\u003e\n\n## 9. Other Projects You Might Like\n\n-   [**ReactiveSearch API**](https://github.com/appbaseio/reactivesearch-api) API Gateway for ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).\n\n-   [**searchbox**](https://github.com/appbaseio/searchbox) A lightweight and performance focused searchbox UI libraries to query and display results with ReactiveSearch Cloud.\n    -   [**Vanilla JS**](https://github.com/appbaseio/searchbox)\n    -   [**Flutter**](https://github.com/appbaseio/flutter-searchbox)\n\n-   [**dejavu**](https://github.com/appbaseio/dejavu) Elasticsearch / OpenSearch data viewer and editor\n\n-   [**appbase-js**](https://github.com/appbaseio/appbase-js) For when you need to index data in addition to UI components\n\n[⬆ Back to Top](#------reactive-search--)\n\n\u003ca href=\"https://reactivesearch.io/support/\"\u003e\u003cimg src=\"https://i.imgur.com/UL6B0uE.png\" width=\"100%\" /\u003e\u003c/a\u003e\n","funding_links":[],"categories":["Other Components","JavaScript","Uncategorized","Components \u0026 Libraries","React [🔝](#readme)","vue","UI Components [🔝](#readme)","UI Components","Component Libraries"],"sub_categories":["Uncategorized","UI Components","Misc","Search"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappbaseio%2Freactivesearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappbaseio%2Freactivesearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappbaseio%2Freactivesearch/lists"}