@appbaseio/react-native-searchbox

React Native Searchbox

A lightweight and performance oriented react native library to build search layouts with Elasticsearch.

TOC

• Intro
• Features
• Usage
• Installation
• Docs Manual
• Contributing
• Other Projects You Might Like

1. Intro

React Native SearchBox offers lightweight and performance-focused components 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.

⬆ Back to Top

2. Features

• Design search experiences with best practices
• Searchbox UI component with autosuggestions, recent searches and auto-fill functionalities.
• Customize your components at will
• Follow React principles

⬆ Back to Top

3. Usage

Basic Usage

    <SearchBase
      // Elasticsearch index
      index="good-books-ds"
      // Appbase credentials
      credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
      // Appbase URL
      url="https://arc-cluster-appbase-demo-6pjy6z.searchbase.io"
      // Configure the appbase analytics
      appbaseConfig={{
        recordAnalytics: true,
        enableQueryRules: true,
        userId: '[e-mail]',
        customEvents: {
          platform: 'ios',
          device: 'iphoneX'
        }
      }}
    >
      <SearchBox
        // A unique identifier for each component
        id="search-component"
        // Data fields to search on
        dataField={[
          {
            field: 'original_title',
            weight: 1
          },
          {
            field: 'original_title.search',
            weight: 3
          }
        ]}
      />
   </SearchBase>

Note: Please note that the SearchBox component doesn't work with React Native Web because it uses the Modal component to display the suggestions that needs some extra plugins.

⬆ Back to Top

4. Installation

npm install @appbaseio/react-native-searchbox
# or
yarn add @appbaseio/react-native-searchbox

⬆ Back to Top

5. Docs Manual

The official docs for the library are over here.

⬆ Back to Top

6. Contributing

Please check the contribution guide

⬆ Back to Top

7. Other Projects You Might Like

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

• reactivesarch-api ReactiveSearch API is a declarative, open-source API for querying Elasticsearch. It also acts as a reverse proxy and API gateway to an Elasticsearch cluster. ReactiveSearch API is best suited for site search, app search and e-commerce search use-cases.

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

⬆ Back to Top