@shahbaz61/searchbox-reactjs v1.2.3

React component for faster and simpler integration for Zir-AI in web development.

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

The perfect starting point to integrate Zir-Ai Semantic search within your ReactJs project

:bulb: Getting Started

to install Zir-Ai ReactJs package for semantic search

npm install @shahbaz61/searchbox-reactjs

Then, import ZirSearchBox from @shahbaz61/searchbox-reactjs

    import React, { useState } from 'react'
    import { ZirSearchBox } from "@shahbaz61/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}
            />
        )
    }

lets discuss the above:

apikey

apikey is your key which is linked with your single or multiple corpus. it's mandatory to pass apikey

customerID

it is your account ID which need to be passed to the component

corpusID

Basically it takes array of corpus id's which means on which corpus you want to make search

query

it is state to pass to the request

setQuery

it is state handler to set query on onChange event

setResults

it is state handler which will update result state with response of search query

Optional Parameters

resultsPerPage

By default results per page is 10, so which can be changed by passing props resultsPerPage

focus

By default its false, but if set true the search box will be focused on component mount

logo

If want to change logo, pass image src with logo props

ref

Pass react useRef instance to ref props to control search from outside the native component like ref.current.handleSearch('query')