markus-agency-mui-search-bar

markus-mui-search-bar

Installation

npm i --save markus-agency-mui-search-bar

Note: This component is intended to projects using Material-UI v5+

Usage

Simple usage

import { SearchBar } from 'markus-agency-mui-search-bar';
const requestSearch = searchedVal => {
      /* TODO with searchedVal */ 
};
const cancelSearch = () => {
    /* TODO on cancelSearch */ 
};
return (
  <SearchBar 
      onChange={(searchVal) => requestSearch(searchVal)}
      onCancelSearch={() => cancelSearch()}
  />
);

The component supports "debounce" input. The user can define the time period (in ms) for which the component will detect the change and fire the "onChange" event. In this way, the user can avoid searches every time a character is entered.

import { SearchBar } from 'markus-agency-mui-search-bar';
const requestSearch = searchedVal => {
      /* TODO with searchedVal */ 
};
const cancelSearch = () => {
    /* TODO on cancelSearch */ 
};
return (
  <SearchBar 
      searchValue={globalFilterData['search_filter']}
      label={'Search'}
      placeholder="Search name"
      onChange={(searchVal) => requestSearch(searchVal)}
      onCancelSearch={() => cancelSearch()}
      autoComplete={"on"} // off is default
      debounceTime={1000} // in ms
  />
);

SearchBar Properties

Name	Type	Default	Description
id	string	''	Component id optional.
value	string	''	The value of the text field.
label	string	''	Sets component label.
placeholder	string	''	Sets component placeholder
onChange	func		Fired when the text value changes.
onCancelSearch	func		Fired when the search is cancelled.
autoComplete	string	'off'	Prevent browser to offer autofill and autocomplete for input field.
disabled	bool	false	Disables text field.
debounceTime	number	0	Sets a delay between user types and when the input's value is updated.

* properties

License

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