React Storefront
|

SearchDrawer

import SearchDrawer from 'react-storefront/SearchDrawer'

Props

NameTypeDefaultDescription
placeholderstring'Search...'

The placeholder text for the input. Defaults to "Search..."

closeButtonTextstring

Set this prop to use a text button instead of an icon for the close button. If set, CloseButtonIcon will be ignored

CloseButtonIconfunc() => <ClearIcon />

Overrides the default close icon. Takes a React component.

blurBackgroundbooltrue

Set to false to disable background blurring. Defaults to true.

searchButtonVariantenum : 'icon' |
'fab'
'fab'

Set to "icon" to display the search button as an icon in the search input. Set to "fab" to display the search button as a separate floating action button to the right of the search input when the user enters text.

showClearButtonbooltrue

Set to false to never show the clear button. The search icon will be shown inside the input even when the user has entered text.

initialContentelement

Content to display in place of the results when the search is blank.

searchURLstring'/search'

The URL to which the search is submitted.

searchFieldNamestring'q'

A name for the search field, which will be the name of the query string parameter through which the search string is submitted.

ampThumbnailWidthnumber120

AMP Thumbnail Image Width. Defaults to 120

ampThumbnailHeightnumber120

AMP Thumbnail Image Height. Defaults to 120

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • paper
  • paperAnchorBottom
  • wrap
  • header
  • closeButton
  • closeButtonText
  • searchField
  • searchInput
  • groupCaption
  • group
  • thumbnailGroup
  • thumbnail
  • results
  • loading
  • searchFab
  • hidden