mui-search-bar

Installation

1npm i --save @mkyy/mui-search-bar

or

1yarn add @mkyy/mui-search-bar

Note: This component is intended to projects using Material-UI v5+, if you're still using an older version, I recommend material-ui-search-bar.

Usage

The SearchBar is a controlled input, meaning that you 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.

1import SearchBar from '@mkyy/mui-search-bar';
2
3return (
4  <SearchBar
5    value={textFieldValue}
6    onChange={newValue => setTextFieldValue(newValue)}
7    onSearch={handleSearch}
8  />
9);

!Important: If you are using options to auto-complete suggests, you need to get the value of the clicked option inside your handleSearch function.

If you try using your controlled input state to manage this event, you'll get the old value, and not the labelOptionValue.

1import SearchBar from '@mkyy/mui-search-bar';
2
3const handleSearch = labelOptionValue => {
4  //...
5  console.log(labelOptionValue);
6};
7
8return (
9  <SearchBar
10    value={textFieldValue}
11    onChange={newValue => setTextFieldValue(newValue)}
12    onSearch={handleSearch}
13  />
14);

SearchBar Properties

Name	Type	Default	Description
className	string	''	Custom top-level class.
width	string or number	'300px'	Sets the width of SearchBar.
height	string or number	'40px'	Sets the height of SearchBar.
disabled	bool	false	Disables text field.
onCancelResearch	func		Fired when the search is cancelled.
onChange	func		Fired when the text value changes.
onSearch	func		Fired when enter button is pressed.
placeholder	string	'Search'	Sets placeholder text for the embedded text field.
style	object	null	Override the inline-styles of the root element.
value	string	''	The value of the text field.
options	Array<string>	[]	Options of autocomplete suggests list.

* required properties

License

The files included in this repository are licensed under the MIT license.

Contributions

Feel free to open an issue or add a pull request. Anytime. Really, I mean it.

Also, if you like my work, I'll let you know that I love coffee.