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