React Storefront
|

SearchDrawer

Import
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.

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