react-addsearch-ui
v0.1.2
Published
AddSearch UI for React
Downloads
75
Maintainers
Readme
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 bothhasAutocomplete
andhasSearchAsYouType
loadMoreResults
defines what UI option to use for loading more resultssortByOptions
andfiltersOptions
for configuration details visit SortBy Documentation and Filters Documentation respectivelyfilterTypes
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