markus-agency-mui-search-bar v1.0.1

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

* properties

License

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