Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

material-ui-toast

1.1.6 • Public • Published

material-ui-toast

Snackbar component using Material-UI with Redux integration

NPM JavaScript Style Guide

Install

$ npm install material-ui-toast --save

Setup

Add the Reducer to Redux store

The first step is to add the reducer to your rootReducer when creating Redux's store.

import { combineReducers } from 'redux'
import { snackbarReducer } from 'material-ui-toast'
 
const rootReducer = combineReducers({
  // other reducers...
  snackbar: snackbarReducer
})
 
export default rootReducer

Add the SnackbarProvider component to the tree

The second step is to add the SnackbarProvider component somewhere in your app.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { SnackbarProvider } from 'material-ui-toast'
import App from './App' // your entry page
import reducer from './reducers' // root reduer
 
const store = createStore(reducer)
 
ReactDOM.render(
  <Provider store={store}>
    <SnackbarProvider SnackbarProps={{ autoHideDuration: 3000 }} direction={{ vertical: 'top', horizontal: 'left' }}>
      <App />
    </SnackbarProvider>
  </Provider>,
  document.getElementById('root')
)
import React from 'react'
import { withSnackbar } from 'material-ui-toast'
import Button from '@material-ui/core/Button'
 
class MyComponent extends React.Component {
 
  handleClick = (variant) => {
    const { snackbar } = this.props
    const options = {
      message: variant,
      action: false,
      handleAction: () => {/* do something... */ },
      close: true,
      variant: variant
    }
    snackbar.show(options)
  }
 
  render () {
    <div>
        <Button variant="contained" color="primary" onClick={() => { this.handleClick('success') }}>
            Open Success Toast
        </Button>
        <Button variant="contained" color="secondary" onClick={() => { this.handleClick('error') }}>
            Open Error Toast
        </Button>
        <Button variant="contained" color="primary" onClick={() => { this.handleClick('warning') }}>
          Open Warning Toast
        </Button>
        <Button variant="contained" color="secondary" onClick={() => { this.handleClick('info') }}>
          Open info Toast
        </Button>
    </div>
  }
}
 
export default withSnackbar(MyComponent)

API

const options = {message:'Archived',action: false,handleAction: () => {},close: true,variant: 'info' snackbar.show(options)

  • message (string) – message to display
  • action (string, optional) – label for the action button
  • handler (function, optional) – click handler for the action button
  • close (string, optional) – handle close option
  • variant (string) – handle variant option (info, success, error, warning)

References

License

MIT

Install

npm i material-ui-toast

DownloadsWeekly Downloads

162

Version

1.1.6

License

MIT

Unpacked Size

37.3 kB

Total Files

6

Last publish

Collaborators

  • avatar