@mkyy/mui-search-bar NPM

mui-search-bar

Installation

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

yarn 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.

import SearchBar from '@mkyy/mui-search-bar';

return (
  <SearchBar
    value={textFieldValue}
    onChange={newValue => setTextFieldValue(newValue)}
    onSearch={handleSearch}
  />
);

!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.

import SearchBar from '@mkyy/mui-search-bar';

const handleSearch = labelOptionValue => {
  //...
  console.log(labelOptionValue);
};

return (
  <SearchBar
    value={textFieldValue}
    onChange={newValue => setTextFieldValue(newValue)}
    onSearch={handleSearch}
  />
);

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.