material-ui-toast-redux

1.0.4 • Public • Published

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

Package Sidebar

Install

npm i material-ui-toast-redux

Weekly Downloads

10

Version

1.0.4

License

ISC

Unpacked Size

428 kB

Total Files

23

Last publish

Collaborators

  • mohsen_saremi