Network Performance Monitor

    @appbaseio/react-native-searchbox

    1.7.0-preview.5 • Public • Published

    searchbase
    React Native Searchbox

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


    TOC

    1. Intro
    2. Features
    3. Usage
    4. Installation
    5. Docs Manual
    6. Contributing
    7. 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: 'jon3@appbase.io',
            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

    Install

    npm i @appbaseio/react-native-searchbox

    DownloadsWeekly Downloads

    13

    Version

    1.7.0-preview.5

    License

    Apache-2.0

    Unpacked Size

    77 kB

    Total Files

    29

    Last publish

    Collaborators

    • siddharthlatest
    • anjuma
    • mohdashraf010897
    • reactivesearch