This documentation demonstrates how to integrate the ZIR Semantic Search widget into a ReactJS application.

For full :page_facing_up: documentation, visit the online documentation.

The search widget connects to a corpus or corpora through API keys. It presents the user with a polished, customizable text box for entering queries, and populates results using the setter method of a React state hook. It also supports programmatic query execution through an optional ref parameter.

:bulb: Getting Started

Begin by installing the ReactJS package for semantic search:

npm install @zir-ai/searchbox-reactjs

The snippet below shows how to embed a search box inside a React component.
In this example, the queries are run against three corpora simultaneously, and
the results are merged together.

import React, { useState } from 'react'
import { ZirSearchBox } from "@zir-ai/searchbox-reactjs"

export default () => {
    const [query, setQuery] = useState("")
    const [results, setResults] = useState([])

    return (
        <ZirSearchBox
            apikey="zqt_cKg6-joMkEsOa1EbNS-MQefDdC3I7Ct_g3tr2Q"
            customerID={1890073338}
            corpusID={[160, 148, 157]}
            query={query}
            setQuery={setQuery}
            setResults={setResults}

            <!-- optional props -->
            resultsPerPage={15}
            focus={true}
            ref={handleSearchRef}
            logo={Logo}
        />
    )
}

API

A brief description of each method parameter is below:

Mandatory Parameters

1. apiKey: the API key linked to one or more corpora.
2. customerID: your account ID.
3. corpusID: an array of IDs of the corpora to be queried. This can range
   from a single corpus to an account-specific limit, which is generally five.
4. query: a state variable that holds the actual query.
5. setQuery: a setter for the query state variable.
6. setResults: a state handler that updates the result state with the
   response of a search query.

Optional Parameters

1. resultsPerPage (default 10): the number of results that will be returned by the
   search.
2. focus (default false): if true, then the search box will be focused on
   component mount.
3. logo (default ZIR logo): this can be used to modify the logo shown in the
   search box.
4. ref: Pass a React useRef instance in order to control search from outside
   the native component, e.g. ref.current.handleSearch('query')

Pagination

Pagination can be setup by adding a few additional parameters as
exemplified below:

 <ZirSearchBox
        start={start}
        setStart={setStart}
        ref={handleSearchRef}
/>

    <Pagination ref={handleSearchRef} />

1. start: This optional parameter takes an integer value and serves as the
   offset, i.e, the number of records the database should skip before selecting
   records. For example, if a value of 3 is passed, the first three results of
   the result set will not be included.
2. setStart: A hook for managing the state of the start parameter and
   changing its value.
3. ref: Pass the same ref that was passed to the <ZirSearchBox>
   component earlier.