mattste / material-ui-search-bar

Material design search bar

Material Search Bar

See this component in action

Installation

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

Usage

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

// ...
render() {
  return(
    <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      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.
onRequestSearch	function		Fired when the search icon is clicked.
searchIcon	node	<SearchIcon color={grey500} />	Override the search icon.
spellCheck	bool	false	Specifies whether the element to have its spelling and grammar checked or not.
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.