# material-ui-search

> material ui search bar

Latest version **1.0.0** (published 2019-09-30) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-09-30 |
| First published | 2019-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 66.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | nadim sheikh |
| Maintainers | nadimsheikh07 |
| Keywords | react, redux, material, material-design, material-ui, mui, search, searchbar, material-ui-search |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-09-30

## README

# material-ui-search

> material ui search bar 

[![NPM](https://img.shields.io/npm/v/material-ui-search.svg)](https://www.npmjs.com/package/material-ui-search) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save material-ui-search
```

### Add the Reducer to Redux store

The first step is to add the reducer to your rootReducer when creating Redux's store.

```js
import { combineReducers } from 'redux'
import { searchbarReducer as searchbar } from 'material-ui-search'

const rootReducer = combineReducers({
  // other reducers...
  searchbar
})

export default rootReducer
```


### Add the SearchbarProvider component to the tree

The second step is to add the `SearchbarProvider` component somewhere in your app.

```js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { SearchbarProvider } from 'material-ui-search'
import App from './App' // your entry page
import reducer from './reducers' // root reduer

const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <SearchbarProvider>
            <App />
    </SearchbarProvider>
  </Provider>,
  document.getElementById('root')
)
```

Set the searchbar data

```js
import React from 'react'
import { withSearchbar } from 'material-ui-search'
import { SearchBar } from 'material-ui-search'

class MyComponent extends React.Component {

  onChangeSearch(event) {
    const { searchbar } = this.props
    searchbar.search(event);
  }

  render () {
    <div>
        <SearchBar
          onChange={(e) => { this.onChangeSearch(e) }}
          onRequestSearch={(e) => { this.onChangeSearch(e) }}
          onCancelSearch={(e) => { this.onChangeSearch(e) }}
          style={{
            margin: '0 auto',
            maxWidth: 800
          }}
        />
    </div>
  }
}

MyComponent = withSearchbar()(MyComponent)
export default MyComponent
```

Access the search data

```js
import React, { Component } from 'react'
import { withSearchbar } from 'material-ui-search'

class GetComponent extends React.Component {
    render() {
        const { searchQuery } = this.props.searchbar
        return (
            <React.Fragment>
                <h3>{searchQuery}</h3>
            </React.Fragment>
        )
    }
}

GetComponent = withSearchbar()(GetComponent)
export default GetComponent
```

## License

[MIT](LICENSE)

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