@appbaseio/react-searchbox
v1.9.0
Published
React library kit based on ReactiveSearch's DataSearch
Downloads
653
Keywords
Readme
TOC
1. Intro
React SearchBox
offers a lightweight (~30KB: Minified + Gzipped) and performance focused searchbox UI component to query and display results from your ElasticSearch app (aka index) using declarative props. It is an alternative to using the DataSearch component from ReactiveSearch.
2. Features
- Design search experiences with best practices
- Customize your components at will
- Follow React principles
3. Usage
Basic Usage
<SearchBox
app="good-books-ds"
credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
dataField={['original_title', 'original_title.search']}
/>
Usage With All Props
<SearchBox
app="good-books-ds"
credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
dataField={[
{ field: 'original_title', weight: 1 },
{ field: 'original_title.search', weight: 3 }
]}
title="Search"
defaultValue="Songwriting"
placeholder="Search for books"
autosuggest={true}
defaultSuggestions={[
{ label: 'Songwriting', value: 'Songwriting' },
{ label: 'Musicians', value: 'Musicians' }
]}
highlight={true}
highlightField="group_city"
queryFormat="or"
fuzziness="AUTO"
showClear
showVoiceSearch
/>
4. Installation
npm install @appbaseio/react-searchbox
# or
yarn add @appbaseio/react-searchbox
5. Docs Manual
The official docs for the library are at docs/react-searchbox
6. Contributing
Please check the contribution guide
7. 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).
searchbox Similar to
react-searchbox
we offer a lightweight and performance focused searchbox UI libraries for Vanilla and Vue.
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.
ReactiveMaps is a similar project to Reactive Search that allows building realtime maps easily.
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.