# @anteniyus/message-bar

> Simple Material-UI whole Project Snackbar

Latest version **1.0.0** (published 2020-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @anteniyus/message-bar
pnpm add @anteniyus/message-bar
yarn add @anteniyus/message-bar
bun add @anteniyus/message-bar
```

## 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 | 2020-09-27 |
| First published | 2020-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 271.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Reza |
| Maintainers | anteniyus |

## Links

- npm: https://www.npmjs.com/package/@anteniyus/message-bar
- Repository: Reza/@anteniyus/message-bar
- npm.io page: https://npm.io/package/@anteniyus/message-bar

## Dependencies (5)

- [redux](https://npm.io/package/redux.md) ^4.0.5
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.0
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.3.0
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1

## Recent versions

- 1.0.0 (latest) — 2020-09-27

## README

# @anteniyus/message-bar

> Simple Material-UI whole Project Snackbar

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

## Install

```bash
npm install --save @anteniyus/message-bar
```

## Usage

> First create redux store and import snackbarReducer in your index.js file:
```jsx
import { createStore, applyMiddleware } from 'redux';
import snackbarReducer from './components/Snackbar/SnackbarReducer';

const store = createStore(snackbarReducer, applyMiddleware(thunk));
```
> Then wrap your return statement with Provider and add Snackbar component:
```jsx
import { createStore, applyMiddleware } from 'redux';
import snackbarReducer from './components/Snackbar/SnackbarReducer';
import { Provider } from 'react-redux'; /* Add this */

const store = createStore(snackbarReducer, applyMiddleware(thunk));

export const ExampleComponent = () => {
  return (
    <Provider store={store}> {/* Add this */}
      <Snackbar /> {/* Add this */}
      ... //Other stuff
    </Provider> /* Add this */
  )
}
```

>After that in any other components you want to show a message using snackbar you must wrap your component with **SnackbarWrapper**, and use *this.props.showSnackbar('your message', variant)* to show message to user, also variant is one of ['error', 'info', 'success', 'warning'].

```jsx
import React, { Component } from 'react';
import SnackbarWrapper from './components/Snackbar/SnackbarWrapper';

class General extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        onClick={() => {
          this.props.showSnackbar('This is a sample message', 'error');
        }}
      >
        Click me to show a message bar
      </button>
    );
  }
}

export default SnackbarWrapper(General)

```

```jsx
import React, { Component } from 'react'

import General from './General'

class Example extends Component {
  render() {
    return <General />
  }
}
```

## License

MIT © [Reza](https://github.com/Reza)

---
_Source: https://npm.io/package/@anteniyus/message-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._