# react-search-sdk
Unbxd react-search component

Add unbxd react component to your project

```bash
npm install unbxd-reactsearch

```

Or

```bash
yarn add unbxd-reactsearch

```

Import the required components

```js
import UnbxdSearch, ProductList, AutoSuggest, Facets from 'unbxd-reactsearch';
```

`UnbxdSearch` is the parent component which accepts these props


```javascript 
<UnbxdSearch
    apiKey={apiKey}
    siteKey={siteKey}
    currentSearch={{
      q: 'shirt', // accepts initial search argument, default *
      start: 0, // accepts offset for search, default 0
      rows: 20, // number of products to be displayed
      variants: false // whether to enable variants, default false
      
    }}
> 
   .....
</UnbxdSearch>

```

| UnbxdSearch Props           | Definition    |
| -------------  |:-------------|
| `apiKey`       | Search APIKey  |
| `siteKey`      | Search siteKey  |
| `currentSearch`      | Argument object related to search configuration |


`AutoSuggest` component will provide the input box where the user can type in the query and has 3 states


```javascript 

const keywordMapping = {
  name: 'title', // title is the field in your catalog
  originalPrice: 'price',
  originalPriceIndex: false,
  discountPrice: 'selling_price',
  discountPriceIndex: false,
  image: 'imageUrl',
  imageArrayIndex: 0,
  url: 'productUrl',
  id: 'uniqueId',
  promoMessage: 'promoMessage',
};


const App = () => (
<UnbxdSearch
    apiKey={apiKey}
    siteKey={siteKey}
    currentSearch={{
      q: 'shirt',
    }}
> 
  <AutoSuggest
        keywordMapping={keywordMapping}
        limit={10}
    />
</UnbxdSearch>
)

```



| Autosuggest Props           | Definition    |
| -------------  |:-------------|
| `dropdown`      | whether to show results as a dropdown default `true`  |
| `showThumbPreview`      | whether to show product thumbnail preview in the dropdown default `false` |
| `updateSearch`       | default `false` if true updates products in `ProductList` component and doesnt show dropdown |
| `placeholder`       | Autosuggest inout box placeholder. default `What are you looking for ?`  |
| `keywordMapping`  | keywordmapping object the component uses default fields like name, image, price, url, id etc. Map these to fields in your catalog|

`Facet` is Facet component, which will render the facet view.
When a facet is selected / deselected a new search call happens and updates the current search results. No additional props are supported by this component


```javascript 
<UnbxdSearch
    apiKey={apiKey}
    siteKey={siteKey}
    currentSearch={{
      q: 'shirt',
    }}
> 
   <Facets />
</UnbxdSearch>

```

`ProductList` This component renders the resulting product cards for the current search query, and updates when `Facets` are selected or when `Autosuggest` input changes with `updateSearch` `true`

```javascript 

const keywordMapping = {
  name: 'title', // title is the field in your catalog
  originalPrice: 'price',
  originalPriceIndex: false,
  discountPrice: 'selling_price',
  discountPriceIndex: false,
  image: 'imageUrl',
  imageArrayIndex: 0,
  url: 'productUrl',
  id: 'uniqueId',
  promoMessage: 'promoMessage',
};


const App = () => (
<UnbxdSearch
    apiKey={apiKey}
    siteKey={siteKey}
    currentSearch={{
      q: 'shirt',
    }}
> 
  <ProductList
      currency="$"
      keywordMapping={keywordMapping}
        limit={20}
    />
</UnbxdSearch>
)

````

| ProductList Props          | Definition    |
| -------------  |:-------------|
| `ProductCard`      | This props is React component, if provided renders this component for each product, default  uses Unbxd Component to display products |
| `InfiniteScroll` | To have infinitescroll for the products, default `true` |
| `limit`| how many products to be displayed per page, default `20` |
| `currency` | currency symbol to display price, default `$` |