# material-ui-toast-redux

> material ui snakbar controlled using redux

Latest version **1.0.4** (published 2018-12-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install material-ui-toast-redux
pnpm add material-ui-toast-redux
yarn add material-ui-toast-redux
bun add material-ui-toast-redux
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-12-16 |
| First published | 2018-12-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 417.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mohsen saremi |
| Maintainers | mohsen_saremi |
| Keywords | toast, snackbar, redux-toast, redux-snackbar, react-toast, react-snackbar, material-ui-toast, material-ui-snackbar, material-ui-toast-redux, material-ui-snackbar-redux, material-ui-redux-toast, material-ui-redux-snackbar |

## Links

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

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-12-16
- 1.0.3 — 2018-12-16
- 1.0.2 — 2018-12-13
- 1.0.1 — 2018-12-13
- 1.0.0 — 2018-12-13

## README

# Material-UI toast redux

using material ui `Snackbar` and `redux` for creating toast component

checkout [live demo](https://mohsensaremi.github.io/material-ui-toast-redux/).

## instalation

using yarn
```
yarn add material-ui-toast-redux
```

using npm
```
npm install --save material-ui-toast-redux
```

## configuration

### redux
add toast reducer 
```
import {createStore, combineReducers} from 'redux';
import {reducer as toast} from 'material-ui-toast-redux';

const reducers = combineReducers({
    toast,
});

export default createStore(reducers);
```
(note: reducer name must be `toast`)

### react
add `Toast` component in one of your first component. you should mount this component only once in your components tree
```
import React from 'react';
import {Toast} from 'material-ui-toast-redux';

const App = () => (
    <div>
        <Header/>
        <Content/>
        <Footer/>
        .
        .
        .
        
        <Toast/>
    </div>
)
```

### Toast component
#### props
this is a `Snackbar` component from `material-ui`.
all properties supplied will be spread to `Snackbar` component.
for see list of all available properties visit [Snackbar api page](https://material-ui.com/api/snackbar/).

```
<Toast
    anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
    }}
/>
```

## withToast HOC
you can use `withToast` hoc to inject `openToast` function into component props. 
```
import {withToast} from 'material-ui-toast-redux';

const MyComponent = (props) => (
    <button
        onClick={()=>{
            props.openToast({
                messages: ['sample message'],
                type: 'success',
                autoHideDuration: 6000,
            });
        }}
    >
        open toast
    </button>
)

export default withToast(MyComponent);
```

## options

name | type | required | description
--- | --- | --- | --- 
messages | array | yes | array of messages to display on toast. each item displayed in on line
type | `string enum (success,error,warning,info)` | yes | for color and icon displayed in toast
autoHideDuration | number | no | duration in millisecond for close toast

## test
```
not implemented yet
```

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