Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 107 Commits
.github		.github
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
demo.gif		demo.gif
package-lock.json		package-lock.json
package.json		package.json
styleguide.config.js		styleguide.config.js

Repository files navigation

Material Search Bar

See this component inaction

Installation

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

Note: If you're still using Material-UI v3, please install v0.x of the search bar usingnpm i --save material-ui-search-bar@beta

Usage

TheSearchBar is acontrolled input, meaning thatyou need to keep the input state. This allows for much flexibility, e.g. you can change and clear the search input just by changing its props.

importSearchBarfrom"material-ui-search-bar";// *snip*return(<SearchBarvalue={this.state.value}onChange={(newValue)=>this.setState({value:newValue})}onRequestSearch={()=>doSomethingWith(this.state.value)}/>);

SearchBar Properties

Name	Type	Default	Description
cancelOnEscape	`bool`		Whether to clear search on escape
classes*	`object`		Override or extend the styles applied to the component.
className	`string`	`''`	Custom top-level class
closeIcon	`node`	`<ClearIcon style={{ color: grey[500] }} />`	Override the close icon.
disabled	`bool`	`false`	Disables text field.
onCancelSearch	`func`		Fired when the search is cancelled.
onChange	`func`		Fired when the text value changes.
onRequestSearch	`func`		Fired when the search icon is clicked.
placeholder	`string`	`'Search'`	Sets placeholder text for the embedded text field.
searchIcon	`node`	`<SearchIcon style={{ color: grey[500] }} />`	Override the search icon.
style	`object`	`null`	Override the inline-styles of the root element.
value	`string`	`''`	The value of the text field.