Material-ui-search-bar-enhanced NPM

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.