react-addsearch-ui/README.md

AddSearch UI for React

# React AddSearch UI

Implemements [AddSearch](www.addsearch.com)'s [search-ui](https://github.com/AddSearch/search-ui)
package as a ReactJS library exposing one single Component for Integration.

## Setup

### 1. Add `react-addsearch-ui` to your dependencies:

```bash
npm i react-addsearch-ui
// pnpm i react-addsearch-ui
// yarn add react-addsearch-ui
```

### 2. Import and configure `AddSearchUiIntegration` component

```tsx
import { AddSearchUiIntegration } from 'react-addsearch-ui';
import 'react-addsearch-ui/dist/style.css';

export default function App() {
    return (
        <div className="flex flex-col w-full h-full gap-6 p-6 items-center">
            <h1>My React AddSearch UI Integration Example</h1>
            <AddSearchUiIntegration publicSiteKey="YOUR_PUBLIC_SITEKEY(as ENV VAR ideally)" />
        </div>
    );
}
```

-   `publicSiteKey` can be found in your dashboard

### 3. Brand your Search UI

#### Brand Color:

```tsx
<AddSearchUiIntegration publicSiteKey="YOUR_PUBLIC_SITEKEY" primaryColor="#004225" />
```

#### Custom Font:

Load font, e.g. by adding to your document head, e.g.:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet"
/>
```

then use the customFont property on `AddSearchUiIntegration`:

```tsx
<AddSearchUiIntegration
    publicSiteKey="YOUR_PUBLIC_SITEKEY"
    primaryColor="#004225"
    customFont="Poppins"
/>
```

### 4. Configure the UI

```tsx
<AddSearchUiIntegration
    publicSiteKey="YOUR_PUBLIC_SITEKEY"
    primaryColor="#004225" // default AddSearch primary color
    customFont="Poppins" // no default
    searchFieldHeaderText="Search" // no default
    searchButtonText="Apply" // no default
    hasSearchInputFieldIcon={false} // default true
    hasSearchInputAutofocus={false} // default true
    searchInputPlaceholderText="What are you looking for?" // default "keyword"
    hasSearchAsYouType={true} // default false
    minLengthToShowSearchAsYouTypeResults={1} // default 3
    hasAutocomplete={true} // default true
    loadMoreResults={'button'} // default 'pagination'
    hasLoadMore={true} // default true
    sortByOptions={sortByOptions} // default []
    filters={[
        {
            labelText: 'Categories',
            type: 'checkbox-group',
            options: {
                pricing: {
                    label: 'Pricing',
                    filter: { category: '1xpricing' }
                },
                partners: {
                    label: 'Partners',
                    filter: { category: '1xpartners' }
                },
                customers: {
                    label: 'Customers',
                    filter: { category: '1xcustomers' }
                }
            }
        },
        {
            labelText: 'Documents',
            type: 'tags',
            options: {
                nofilter: {
                    label: 'All results'
                },
                blog: {
                    label: 'Blog',
                    filter: { category: '1xblog' }
                },
                docs: {
                    label: 'Documentation',
                    filter: { category: '1xdocs' }
                }
            }
        }
    ]}
    hasActiveFilters={true} // default true
/>
```

-   `minLengthToShowSearchAsYouTypeResults` affects both `hasAutocomplete` and `hasSearchAsYouType`
-   `loadMoreResults` defines what UI option to use for loading more results
-   `sortByOptions` and `filtersOptions` for configuration details visit
    [SortBy Documentation](https://github.com/AddSearch/search-ui?tab=readme-ov-file#sort-by) and
    [Filters Documentation](https://github.com/AddSearch/search-ui?tab=readme-ov-file#filters)
    respectively
-   `filterTypes`
-   `filters` can handle 1 'tabs' filter and 1 'select-list' filter and multiple filters of the
    other types (all supported types are 'tabs' | 'checkbox-group' | 'radio-group' | 'tags' |
    'select-list')
-   `hasActiveFilters`is disabled when using Tab Filters