Convert Figma logo to code with AI

appbaseio logoreactivesearch

Search UI components for React and Vue

4,911
472
4,911
167
View on GitHubView on NPM

Top Related Projects

algolia's avatar

instantsearch

3,835

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

elastic's avatar

search-ui

1,944

Search UI. Libraries for the fast development of modern, engaging search experiences.

searchkit's avatar

searchkit

4,805

React + Vue Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components.

nextapps-de's avatar

flexsearch

12,796

Next-Generation full text search library for Browser and Node.js

Quick Overview

ReactiveSearch is an open-source UI component library for building search interfaces. It provides a set of pre-built components that can be easily integrated into React, Vue, and vanilla JavaScript applications, offering a seamless way to create powerful search experiences with minimal effort.

Pros

  • Extensive collection of ready-to-use UI components for search interfaces
  • Supports multiple JavaScript frameworks (React, Vue, and vanilla JS)
  • Easy integration with Elasticsearch and other search engines
  • Highly customizable and themeable components

Cons

  • Learning curve for complex configurations and advanced use cases
  • Some components may have performance issues with large datasets
  • Documentation can be overwhelming for beginners
  • Limited support for non-JavaScript frameworks

Code Examples

  1. Basic search component in React:
import { ReactiveBase, SearchBox, ResultList } from '@appbaseio/reactivesearch';

const App = () => (
  <ReactiveBase
    app="your-app-name"
    credentials="your-credentials"
  >
    <SearchBox
      componentId="search"
      dataField={["title", "description"]}
    />
    <ResultList
      componentId="results"
      dataField="title"
      react={{
        and: ["search"]
      }}
    />
  </ReactiveBase>
);
  1. Range slider component in Vue:
<template>
  <reactive-base app="your-app-name" credentials="your-credentials">
    <range-slider
      component-id="price-filter"
      data-field="price"
      :range="{ start: 0, end: 1000 }"
      :defaultValue="{ start: 100, end: 500 }"
    />
  </reactive-base>
</template>

<script>
import { ReactiveBase, RangeSlider } from '@appbaseio/reactivesearch-vue';

export default {
  components: {
    ReactiveBase,
    RangeSlider
  }
};
</script>
  1. DataSearch component with custom styling:
import { DataSearch } from '@appbaseio/reactivesearch';

const CustomDataSearch = () => (
  <DataSearch
    componentId="search"
    dataField={["title", "description"]}
    placeholder="Search for products..."
    style={{
      padding: "10px",
      borderRadius: "5px",
      border: "1px solid #ccc"
    }}
  />
);

Getting Started

To start using ReactiveSearch in a React project:

  1. Install the package:
npm install @appbaseio/reactivesearch
  1. Import and use components in your React app:
import { ReactiveBase, SearchBox, ResultList } from '@appbaseio/reactivesearch';

function App() {
  return (
    <ReactiveBase
      app="your-app-name"
      credentials="your-credentials"
    >
      <SearchBox
        componentId="searchbox"
        dataField={["title", "description"]}
      />
      <ResultList
        componentId="results"
        dataField="title"
        react={{
          and: ["searchbox"]
        }}
      />
    </ReactiveBase>
  );
}

export default App;

Competitor Comparisons

algolia logo

instantsearch

3,835

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Pros of InstantSearch

  • More mature and widely adopted, with a larger community and ecosystem
  • Offers pre-built UI components for faster development
  • Supports multiple programming languages and frameworks

Cons of InstantSearch

  • Tied to Algolia's proprietary search engine, limiting flexibility
  • Can be more expensive for large-scale applications
  • Steeper learning curve for customization and advanced features

Code Comparison

InstantSearch:

import { instantsearch } from 'instantsearch.js';
import { searchBox, hits } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'your_index_name',
  searchClient: algoliasearch('your_app_id', 'your_search_key'),
});

ReactiveSearch:

import { ReactiveBase, SearchBox, ResultList } from '@appbaseio/reactivesearch';

<ReactiveBase
  app="your_app_name"
  credentials="your_credentials"
>
  <SearchBox componentId="search" />
  <ResultList componentId="results" dataField="title" />
</ReactiveBase>

Both libraries provide easy-to-use search functionality, but InstantSearch is more tightly integrated with Algolia's ecosystem, while ReactiveSearch offers greater flexibility in terms of backend choices. InstantSearch's code is more imperative, while ReactiveSearch uses a declarative approach with React components. The choice between the two depends on specific project requirements, budget constraints, and desired level of customization.

elastic logo

search-ui

1,944

Search UI. Libraries for the fast development of modern, engaging search experiences.

Pros of Search UI

  • Officially supported by Elastic, ensuring compatibility with Elasticsearch
  • More extensive documentation and examples
  • Broader ecosystem integration with other Elastic products

Cons of Search UI

  • Less flexible for non-Elasticsearch backends
  • Steeper learning curve for developers new to Elastic Stack
  • Fewer out-of-the-box UI components compared to ReactiveSearch

Code Comparison

ReactiveSearch:

<ReactiveBase
  app="good-books-ds"
  credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
>
  <DataSearch
    componentId="searchbox"
    dataField={["authors", "title"]}
    placeholder="Search for books..."
  />
</ReactiveBase>

Search UI:

<SearchProvider config={config}>
  <SearchBox />
  <Results
    titleField="title"
    urlField="nps_link"
    thumbnailField="image_url"
    shouldTrackClickThrough
  />
</SearchProvider>

Both libraries offer declarative components for building search UIs, but ReactiveSearch provides more specialized components out of the box, while Search UI offers a more generic approach that can be customized to fit various use cases within the Elastic ecosystem.

searchkit logo

searchkit

4,805

React + Vue Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components.

Pros of Searchkit

  • More lightweight and flexible, allowing for easier customization
  • Better documentation and examples for getting started quickly
  • Stronger TypeScript support and type definitions

Cons of Searchkit

  • Smaller community and fewer pre-built components compared to ReactiveSearch
  • Less frequent updates and maintenance
  • Limited out-of-the-box support for advanced features like geospatial search

Code Comparison

Searchkit:

import { SearchkitProvider, SearchBox, Hits } from '@searchkit/react'

const App = () => (
  <SearchkitProvider>
    <SearchBox />
    <Hits />
  </SearchkitProvider>
)

ReactiveSearch:

import { ReactiveBase, SearchBox, ResultList } from '@appbaseio/reactivesearch'

const App = () => (
  <ReactiveBase>
    <SearchBox componentId="search" />
    <ResultList componentId="results" />
  </ReactiveBase>
)

Both libraries offer similar basic components for search functionality, but ReactiveSearch provides more granular control through the componentId prop, while Searchkit focuses on a simpler, more streamlined API.

nextapps-de logo

flexsearch

12,796

Next-Generation full text search library for Browser and Node.js

Pros of FlexSearch

  • Lightweight and fast full-text search library
  • Supports multiple languages and custom tokenizers
  • Can be used in both browser and Node.js environments

Cons of FlexSearch

  • Limited to client-side search functionality
  • Lacks advanced features like faceted search and geospatial queries
  • Requires manual data indexing and management

Code Comparison

ReactiveSearch:

<ReactiveBase
  app="good-books-ds"
  url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
>
  <SearchBox componentId="searchbox" dataField="original_title" />
  <ResultList componentId="result" dataField="original_title" react={{and: "searchbox"}} />
</ReactiveBase>

FlexSearch:

const index = new FlexSearch();
index.add(1, "John Doe");
index.add(2, "Jane Doe");
const results = index.search("John");
console.log(results); // [1]

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

web vue

Check out Searchbox if you're building search UIs for other JS frameworks, React Native or Flutter.

ReactiveSearch Snapshot Tests npm PRs Welcome Mentioned in Awesome React Mentioned in Awesome Elasticsearch


Check out the ReactiveSearch marketplace at reactiveapps.io.


Banner Image showing all the web UI components we offer

Web designer templates for sketch.

Banner Image showing all the mobile UI components we offer

iOS and Android designer templates for sketch.


TOC

  1. ReactiveSearch: Intro
  2. Features
  3. Component Playground
  4. Live Examples
  5. Comparison with Other Projects
  6. Installation
  7. Docs Manual
  8. Contributing
  9. Other Projects You Might Like

1. 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 SingleList sensor component applies an exact match filter based on the selected item.
  • A RangeSlider component applies a numeric range query based on the values selected from the UI.
  • A SearchBox component applies a suggestions and search query based on the search term typed by the user.

UI 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.

ReactiveSearch supports the following built-in display components for displaying results (aka hits):

  1. ReactiveList - ReactiveList supports list and card display formats as well as allows custom rendering at both item and component level,
  2. ReactiveMap - ReactiveMap offers choice of Google Maps and OpenStreetMaps for map rendering,
  3. AIAnswer - AIAnswer offers Retrieval Augmented Generation (RAG) via search engine and OpenAI models, and
  4. 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.

2. Features

Design

  • 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.
  • The library handles the transformation of the UI interactions into search intent queries.
  • Comes with scoped and styled components with className`` and innerClass` prop support.
  • Is themable via ThemeProvider.

Ease of Use

🆕 ReactiveSearch API: Secure your Search Queries

Starting ReactiveSearch v4 (current major release), the library only sends the search intent, specification for this is here - ReactiveSearch API ref. 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.

If 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.

We recommend checking out this KitchenSink App that demonstrates the use of the ReactiveSearch API for all the ReactiveSearch components.

⬆ Back to Top


3. Component Playground

Try the live component playground stories at playground. Look out for the knobs section in the playground part of the stories to tweak each prop and see the effects.


4. Live Demos

A set of live demos inspired by real world apps, built with ReactiveSearch.

Web

You can check all of them on the examples section of website.

⬆ Back to Top


5. Comparison with Other Projects

Here, we share how ReactiveSearch compares with other projects that have similar aims.

#ReactiveSearchSearchKitInstantSearch
BackendElasticsearch, OpenSearch, Solr, MongoDB, OpenAIAny Elasticsearch index hosted on any Elasticsearch cluster.Custom-built for Algolia, a proprietary search engine.
DevelopmentActively developed and maintained.Active issue responses, some development and maintenance.Actively developed and maintained.
Onboarding ExperienceStarter 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 SupportStyled 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 ComponentsLists, 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 PlatformsReact, 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


6. Installation

Installing ReactiveSearch is just one command.

  • If you're using reactivesearch for React
npm install @appbaseio/reactivesearch

You can check out the quickstart guide with React here.

  • If you're using reactivesearch for Vue
npm install @appbaseio/reactivesearch-vue

You can check out the quickstart guide with Vue here.


7. Docs Manual

The official docs for the React library are at docs.reactivesearch.io/docs/reactivesearch/react.

The components are divided into four sections:

Docs for Vue version of the library are available at docs.reactivesearch.io/docs/reactivesearch/vue.

⬆ Back to Top


8. Contributing

Please check the contribution guide.


9. 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 Logs).

  • searchbox A lightweight and performance focused searchbox UI libraries to query and display results with ReactiveSearch Cloud.

  • dejavu Elasticsearch / OpenSearch data viewer and editor

  • appbase-js For when you need to index data in addition to UI components

⬆ Back to Top

NPM DownloadsLast 30 Days