Skip to main content

Interface: SearchBarProps

Defined in: components/SearchBar.tsx:49

Properties​

applyOrderlists?​

optional applyOrderlists?: boolean

Defined in: components/SearchBar.tsx:170

Apply the orderlist filter. Defaults to true when orderlistIds is non-empty, false otherwise — so an authenticated user without a contract still sees the full catalogue.

clearSignal?​

optional clearSignal?: number

Defined in: components/SearchBar.tsx:179

Bump this counter to clear the search input from outside (e.g. on route change). Each unique value triggers a one-time reset of the local term.

companyId?​

optional companyId?: number

Defined in: components/SearchBar.tsx:160

Active company ID from the company switcher.

configuration?​

optional configuration?: any

Defined in: components/SearchBar.tsx:155

Configuration object providing: imageSearchFiltersGrid, imageVariantFiltersMedium — passed to CategoryService baseCategoryId — used when querying by term or brand urls.getProductUrl / urls.getClusterUrl — for card URL generation

containerClassName?​

optional containerClassName?: string

Defined in: components/SearchBar.tsx:141

Additional class name for the container

currency?​

optional currency?: string

Defined in: components/SearchBar.tsx:120

Currency symbol for prices. Resolved from PropellerProvider when omitted; defaults to '€'.

debounceMs?​

optional debounceMs?: number

Defined in: components/SearchBar.tsx:66

Debounce delay in milliseconds

formatPrice?​

optional formatPrice?: (price) => string

Defined in: components/SearchBar.tsx:117

Custom price formatting function

Parameters​

price​

number

Returns​

string

getResultHref?​

optional getResultHref?: (result) => string

Defined in: components/SearchBar.tsx:89

Build the destination URL for a result item. When provided, each result renders as a real <a href> (middle-clickable, new-tab, crawlable) while onResultClick still fires for SPA navigation. Omit to keep the div-based fallback.

Parameters​

result​

SearchBarResult

Returns​

string

getViewAllHref?​

optional getViewAllHref?: (term) => string

Defined in: components/SearchBar.tsx:97

Build the destination URL for the "View all results" CTA. When provided, the CTA renders as a real <a href> (middle-clickable, new-tab, crawlable, keyboard-focusable) while onViewAllClick still fires for SPA navigation. Omit to keep the div-based fallback.

Parameters​

term​

string

Returns​

string

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/SearchBar.tsx:51

Propeller SDK GraphQL client. Resolved from PropellerProvider when omitted.

includeTax?​

optional includeTax?: boolean

Defined in: components/SearchBar.tsx:132

When true, the tax-inclusive (net) price leads; false shows tax-exclusive (gross). Note the SDK mapping: price.net = incl. VAT, price.gross = excl. VAT. Resolved from <PropellerProvider> when omitted; defaults to false (excl.). Mirrors ProductCard/ProductPrice so the dropdown agrees with every other price surface.

inputClassName?​

optional inputClassName?: string

Defined in: components/SearchBar.tsx:144

Extra classes for the search input, merged over the defaults via tailwind-merge.

labels?​

optional labels?: Record&lt;string, string>

Defined in: components/SearchBar.tsx:123

Labels for the component

language?​

optional language?: string

Defined in: components/SearchBar.tsx:57

Language code for search requests

maxResults?​

optional maxResults?: number

Defined in: components/SearchBar.tsx:69

Maximum number of results to show in dropdown

minSearchLength?​

optional minSearchLength?: number

Defined in: components/SearchBar.tsx:63

Minimum characters before search triggers

noImageUrl?​

optional noImageUrl?: string

Defined in: components/SearchBar.tsx:72

Fallback image URL when product has no image

onResultClick?​

optional onResultClick?: (result) => void

Defined in: components/SearchBar.tsx:78

Fires when a result item is clicked. Receives the result object.

Parameters​

result​

SearchBarResult

Returns​

void

onSubmit?​

optional onSubmit?: (term) => void

Defined in: components/SearchBar.tsx:75

Fires when the search form is submitted (Enter key). Receives the search term.

Parameters​

term​

string

Returns​

void

onViewAllClick?​

optional onViewAllClick?: (term) => void

Defined in: components/SearchBar.tsx:81

Fires when "View all results" is clicked. Receives the search term.

Parameters​

term​

string

Returns​

void

orderlistIds?​

optional orderlistIds?: number[]

Defined in: components/SearchBar.tsx:163

Scope the autosuggest fetch to specific orderlist IDs (e.g. a chosen B2B contract).

placeholder?​

optional placeholder?: string

Defined in: components/SearchBar.tsx:60

Placeholder text for the search input

priceLabels?​

optional priceLabels?: Record&lt;string, string>

Defined in: components/SearchBar.tsx:138

Labels for the incl./excl. price suffix. Keys: inclTax, exclTax. Falls back to English 'incl. VAT' / 'excl. VAT'.

productTrackAttributes?​

optional productTrackAttributes?: string[]

Defined in: components/SearchBar.tsx:173

Attribute names to request per product, e.g. ['MPN']. See ProductGrid.

renderPrice?​

optional renderPrice?: (result) => ReactNode

Defined in: components/SearchBar.tsx:114

Replace the price cell of each result with custom content. When provided, this fully overrides the default price rendering (and showPrice) — return any node (e.g. a "Price by quotation" label for a contract catalogue), or null to render nothing for that result. Keeps price/quotation wording app-specific rather than baked into the package.

Parameters​

result​

SearchBarResult

Returns​

ReactNode

showPrice?​

optional showPrice?: boolean

Defined in: components/SearchBar.tsx:105

Show the price column on each autosuggest result. Defaults to true. Set false to hide prices entirely in the dropdown — e.g. a B2B contract-catalogue context where prices are quote-only and shouldn't appear in the live preview. Ignored when renderPrice is provided.

taxZone?​

optional taxZone?: string

Defined in: components/SearchBar.tsx:147

Tax zone used for price calculation. Defaults to 'NL'.

user?​

optional user?: Contact | Customer | null

Defined in: components/SearchBar.tsx:54

The currently logged in user (Contact or Customer)