import SearchBar from '@toppr-engg/byjus-search-qna/lib/esm';
import '@toppr-engg/byjus-search-qna/lib/esm/index.css';

function Home() {
  return (
    <SearchBar
      onSuggestionClick={onSuggestionClick}
      onCustomSearch={onCustomSearch}
      onImageUploaded={onImageUploaded}
      onGetSearchInputRef={onGetSearchInputRef}
      apiBaseUrl={apiBaseUrl}
      authKey={authKey}
      userId={userId}
      origin={origin}
      maxInputLength={maxInputLength}
      placeholder={placeholder}
      suggestionsOrHistoryData={suggestionsOrHistoryData}
      imageUploadPopupData={imageUploadPopupData}
      cameraWrapperData={cameraWrapperData}
      className={className}
      focussedClassName={focussedClassName}
      inputClassName={inputClassName}
      inputFocussedClassName={inputFocussedClassName}
      searchClassName={searchClassName}
      searchFocussedClassName={searchFocussedClassName}
      suggestionsClassName={suggestionsClassName}
      suggestionsFocussedClassName={suggestionsFocussedClassName}
    />
  );
}

PROPS TABLE

| Props | Description | Type | Required | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ---------- | -------- | | onSuggestionClick | A function which gets triggered on clicking any suggestion item | function | Yes | | onCustomSearch | A function which gets triggered on enter press to invoke a custom text search | function | Yes | | onImageUploaded | A function which gets triggered when the selected image has been uploaded | function | Yes | | onGetSearchInputRef | A function to get the search input bar ref so that actions can be performed on it from outside the package (focus) | function | No | | apiBaseUrl | Base path of search apis (Default is prod Api) | string | No | | authKey | Related to authentication of the user | string | Yes | | userId | User Id to be used in api calls user | number | Yes | | origin | Origin to be used in api calls | number | No | | maxInputLength | A number for max input length which can be typed/pasted in searchbar calls (Default 1000) | number | No | | placeholder | A string for input bar placeholder calls (Default - Search) | | suggestionsOrHistoryData | An object for passing props to SuggestionOrHistory component | object | No | | imageUploadPopupData | An object for passing props to ImageUploadModal component | object | No | | cameraWrapperData | An object for passing props to CameraWrapper component | object | No | | className | A string containing css which appends to the App container container css | string | No | | focussedClassName | A string containing css which appends to the App container container css on focus of search input | string | No | | inputClassName | A string containing css which appends to the SearchBar input container css | string | No | | inputFocussedClassName | A string containing css which appends to the SearchBar input container css on focus of search input | string | No | | searchClassName | A string containing css which appends to the SearchBar container css | string | No | | searchFocussedClassName | A string containing css which appends to the SearchBar container css on focus of search input | string | No | | suggestionsClassName | A string containing css which appends to the suggestions-container css | string | No | | suggestionsFocussedClassName | A string containing css which appends to the suggestions-container when focussed | string | No | | suggestionsFocussedClassName | A string containing css which appends to the single suggestion item | string | No |

Function Definitions

/**
 *  A callback function which gets triggered on clicking any suggestion
 * @param {object} data - the object of a single suggestion item from the api response
 */
function onSuggestionClick(data) {}

/**
 *  A callback function which gets triggered on enter press to invoke a custom text search
 * @param {string} text - the text typed/pasted in the searchbar
 */
function onCustomSearch(text) {}

/**
 *  A callback function which gets triggered on enter press to invoke a custom text search
 * @param {object} data - the api response and the base64 string of the selected image
 */
function onImageUploaded(data) {}

/**
 *  callback to get the ref for the search input
 * @param {object} ref
 */
function onGetSearchInputRef(ref) {}