Skip to content

Lightweight and performance oriented search box UI component libraries for React, Vue, React Native, JS and Flutter

License

Notifications You must be signed in to change notification settings

appbaseio/searchbox

Repository files navigation

Searchbox

Searchbox is a lightweight and performance focused search UI component library to query and display results from your ElasticSearch index using declarative props. It's available for React, Vue, React Native and Flutter.

searchbox react_searchbox vue searchbox

react_native_seacrchbox flutter_searchbox


Getting Started

Library Install Demo Docs
React Searchbox npm i @appbaseio/react-searchbox Basic Quick Start
Searchbox npm i @appbaseio/searchbox @appbaseio/searchbase Searchbar with Style Quick Start
Vue Searchbox npm i @appbaseio/vue-searchbox Basic Quick Start
React Native Searchbox npm i @appbaseio/react-native-searchbox Basic Quick Start
Flutter Searchbox Installation Basic Quick Start

Features

We have baked some amazing features in libraries which helps getting insights from searches and also help beautify and enhance search experiences.

Feature Description
Autosuggestions Built-in autosuggest functionality with keyboard accessibility.
Search highlighting Built-in highlighting on search results.
Fuzzy Search Useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account.
Query String Support URL query string param based on the search query text value.This is useful for sharing URLs with the component state.
Search Operators Use special characters in the search query to enable an advanced search behavior.
Voice Search Enable voice input for searching.
Search/Click Analytics Search analytics allows you to keep track of the users' search activities which helps you to improve your search experience based on the analytics extracted by Appbase.io.
Feature Results Promote and hide your results for search queries.
Customization Support custom UI components in order to maintain a consistentency with existing design system.

Searchbox v/s ReactiveSearch

We recommend using React Searchbox over DataSearch or CategorySearch components of ReactiveSearch when you only need to integrate a searchbox UI component into your app. If you are planning to use other UI filters or result components, it is ideal to use the ReactiveSearch library instead of this standalone component.

Key Differences

Property Searchbox Reactivesearch
Component Support Comes with a single Search component Comes with more than 10+ pre-built components for building complex search experiences.
Bundle Size (minified + gzipped) 17kb - 32kb > 100KB - Since it supports tree-shaking, the net size depends on the components you import.
Supported for React, Vue Vanilla JS & Android React, Vue & React Native

Contributing

Please check the contribution guide.

Other Projects You Might Like

  • ReactiveSearch React, React Native and Vue UI components for building data-driven apps with Elasticsearch.

  • arc API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).

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

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