Material Search Bar (Enhanced)

Enhanced version of Wertarbyte's Material Search Bar.

• Added onClear props for the clearing event handler.
• On the virtual keyboard, display "Search" button instead of Return/Go.

See this component in action

Installation

npm i --save material-ui-search-bar-enhanced

Usage

import SearchBar from 'material-ui-search-bar-enhanced'

// ...
render() {
  return(
    <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      onClear={() => console.log('onClear')}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />
  )
}

SearchBar Properties

Name	Type	Default	Description
closeIcon	node	<CloseIcon color={grey500} />	Override the close icon.
dataSource	array	[]	Array of strings or nodes used to populate the list.
dataSourceConfig	object		Config for objects list dataSource.
hintText	string	Search	Sets hintText for the embedded TextField.
iconButtonStyle	object		Override the inline-styles of the button element.
onChange*	function		Fired when the text value changes.
onClear	function		Fired when the clear icon is clicked.
onRequestSearch*	function		Fired when the search icon is clicked.
searchIcon	node	<SearchIcon color={grey500} />	Override the search icon.
style	object		Override the inline-styles of the root element.
value	any		The value of the text field.
disabled	boolean	false	Disables underlying autocomplete.

* required property

License

The files included in this repository are licensed under the MIT license.