React AddSearch UI

Implemements AddSearch's search-ui package as a ReactJS library exposing one single Component for Integration.

Setup

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

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

2. Import and configure AddSearchUiIntegration component

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:

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

Custom Font:

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

<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:

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

4. Configure the UI

<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 and Filters Documentation 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')
• hasActiveFiltersis disabled when using Tab Filters