# material-ui-search-bar-enhanced

> Material style search bar

Latest version **0.5.5** (published 2019-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install material-ui-search-bar-enhanced
pnpm add material-ui-search-bar-enhanced
yarn add material-ui-search-bar-enhanced
bun add material-ui-search-bar-enhanced
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2019-11-21 |
| First published | 2017-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 45.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Filip Veličković |
| Maintainers | filipvk |
| Keywords | react, material, material-design, material-ui, search, react-component |

## Links

- npm: https://www.npmjs.com/package/material-ui-search-bar-enhanced
- Repository: https://github.com/filipvk/material-ui-search-bar
- Homepage: https://github.com/filipvk/material-ui-search-bar#readme
- Issues: https://github.com/filipvk/material-ui-search-bar/issues
- npm.io page: https://npm.io/package/material-ui-search-bar-enhanced

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [react-css-component](https://npm.io/package/react-css-component.md) ^1.0.2

## Recent versions

- 0.5.5 (latest) — 2019-11-21
- 0.5.4 — 2019-10-21
- 0.5.3 — 2019-02-20
- 0.5.2 — 2019-02-20
- 0.5.1 — 2018-04-11
- 0.5.0 — 2018-04-11
- 0.4.4 — 2018-04-11
- 0.4.3 — 2017-10-04
- 0.4.2 — 2017-10-04
- 0.4.1 — 2017-10-04

## README

# Material Search Bar (Enhanced)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-search-bar.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-search-bar)
[![Greenkeeper badge](https://badges.greenkeeper.io/TeamWertarbyte/material-ui-search-bar.svg)](https://greenkeeper.io/)

Enhanced version of Wertarbyte's Material Search Bar.

- Added `onClear` props for the clearing event handler.
- On the virtual keyboard, display "Search" button instead of Return/Go.

![Example](demo.gif)

See this component in [action](https://teamwertarbyte.github.io/material-ui-search-bar/)

## Installation
```shell
npm i --save material-ui-search-bar-enhanced
```

## Usage
```js
import SearchBar from 'material-ui-search-bar-enhanced'

// ...
render() {
  return(
    <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      onClear={() => console.log('onClear')}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />
  )
}
```
### SearchBar Properties
|Name            |Type        |Default     |Description
|----------------|------------|------------|--------------------------------
|closeIcon       | `node` | `<CloseIcon color={grey500} />`           | Override the close icon.
|dataSource     | `array` | `[]` | Array of strings or nodes used to populate the list.
|dataSourceConfig     | `object` | | Config for objects list dataSource.
|hintText       | `string`  | `Search`| Sets hintText for the embedded [TextField](http://www.material-ui.com/#/components/text-field).
|iconButtonStyle| `object ` | | Override the inline-styles of the button element.
|onChange*       | `function` |            | Fired when the text value changes.
|onClear     | `function` |            | Fired when the clear icon is clicked.
|onRequestSearch*       | `function` |            | Fired when the search icon is clicked.
|searchIcon       | `node` | `<SearchIcon color={grey500} />`           | Override the search icon.
|style       | `object` |            | Override the inline-styles of the root element.
|value       | `any` |            | The value of the text field.
|disabled    | `boolean`| false   | Disables underlying autocomplete.

\* required property

## License

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

---
_Source: https://npm.io/package/material-ui-search-bar-enhanced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._