Material-UI toast redux

using material ui Snackbar and redux for creating toast component

checkout live demo.

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.

<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