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