Material Search Bar (Enhanced)
Enhanced version of Wertarbyte's Material Search Bar.
- Added
onClearprops 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-enhancedUsage
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.