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.