Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/appbaseio/searchbox

Lightweight and performance oriented search box UI component libraries for React, Vue, React Native, JS and Flutter
https://github.com/appbaseio/searchbox

appbase elasticsearch elasticsearch-client flutter hacktoberfest javascript react react-native reactivesearch search-ui searchbox vue

Last synced: 4 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/appbaseio/searchbox
Owner: appbaseio
License: apache-2.0
Created: 2019-08-21T05:06:02.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-10-05T05:15:06.000Z (about 1 year ago)
Last Synced: 2024-10-28T15:55:07.748Z (6 days ago)
Topics: appbase, elasticsearch, elasticsearch-client, flutter, hacktoberfest, javascript, react, react-native, reactivesearch, search-ui, searchbox, vue
Language: JavaScript
Homepage:
Size: 35.7 MB
Stars: 183
Watchers: 5
Forks: 21
Open Issues: 82
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome - appbaseio/searchbox - Lightweight and performance oriented search box UI component libraries for React, Vue, React Native, JS and Flutter (JavaScript)

README

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

---

### Getting Started

| Library | Install | Demo | Docs |
| ------------------------------------------------------------------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| [React Searchbox](https://docs.appbase.io/docs/reactivesearch/react-searchbox/quickstart/) | `npm i @appbaseio/react-searchbox` | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/react-searchbox/examples/demo) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/react-searchbox/quickstart/) |
| [Searchbox](https://docs.appbase.io/docs/reactivesearch/searchbox/Quickstart/) | `npm i @appbaseio/searchbox @appbaseio/searchbase` | [Searchbar with Style](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/searchbox/examples/searchbar-with-style) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/searchbox/Quickstart/) |
| [Vue Searchbox](https://docs.appbase.io/docs/reactivesearch/vue-searchbox/quickstart/) | `npm i @appbaseio/vue-searchbox` | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/vue-searchbox/examples/demo) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/vue-searchbox/quickstart/) |
| [React Native Searchbox](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/) | `npm i @appbaseio/react-native-searchbox` | [Basic](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/#a-simple-example) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/) |
| [Flutter Searchbox](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/) | [Installation](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/#installation) | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/flutter-searchbox/quickstart/#a-simple-example) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/) |

### 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](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--basic) | Built-in autosuggest functionality with keyboard accessibility. |
| [Search highlighting](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-highlight) | Built-in highlighting on search results. |
| [Fuzzy Search](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-fuzziness-as-a-number) | 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](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-searchoperators) | Use special characters in the search query to enable an advanced search behavior. |
| [Voice Search](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-showvoicesearch) | Enable voice input for searching. |
| [Search/Click Analytics](https://docs.appbase.io/docs/analytics/Overview/) | 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](https://docs.appbase.io/docs/search/Rules/) | 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](.github/CONTRIBUTING.md).

### Other Projects You Might Like

- [**ReactiveSearch**](https://github.com/appbaseio/reactivesearch/) React, React Native and Vue UI components for building data-driven apps with Elasticsearch.

- [**arc**](https://github.com/appbaseio/arc) API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).

- [**dejavu**](https://github.com/appbaseio/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**](https://github.com/appbaseio/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**](https://github.com/appbaseio/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.