import { SnackbarProvider } from 'notistack';

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

import { withSnackbar } from 'notistack';

class MyComponent extends Component {
  handleNetworkRequest = () => {
     fetchSomeData()
        .then(() => this.props.enqueueSnackbar('Successfully fetched the data.'))
        .catch(() => this.props.enqueueSnackbar('Failed fetching data.'));
  };

  render(){
     //...
  };
  
};

export default withSnackbar(MyComponent);

// Maximum number of snackbars that can be stacked on top of eachother.
maxSnack            type: number          required: true        default: 3

// The little icon that is displayed in a snackbar
iconVariant         type: any             required: false       default: Material design icons

// hide or display icon variant of a snackbar
hideIconVariant     type: boolean         required: false       default: false

// event fired when user clicks on action button (if any)
onClickAction       type: func            required: false       default: dismiss the snackbar

// Do not allow snackbars with the same message to be displayed multiple times
preventDuplicate    type: boolean         required: false       default: false

// Example of a Mui-Snackbar prop
transitionDuration={{ exit: 380, enter: 400 }}

const key = this.props.enqueueSnackbar(message, options)

// text of the snackbar
message                 type:string         required: true

// object containing options with the following shape
options:                type:object         required: false 

// type of the snackbar
options.variant         type:string         oneOf(['default', 'error', 'success', 'warning', 'info'])

// keep a snackbar in the view and prevent auto dismissal
options.persist         type:boolean        required: false

// hide or display this message if it's the same of the previous one
options.preventDuplicate type:boolean        required: false

// You can pass any material-ui Snackbar prop here, and they will be applied to this 
// individual snackbar. For example, this particular snackbar will get dismissed after 1 second.
options.autoHideDuration: 1000

// ❌ before:
this.props.onPresentSnackbar('variant', 'message')

// ✅ after:
this.props.enqueueSnackbar('message', { variant: 'variant' })

this.props.closeSnackbar(key)

// id returned by enqueueSnackbar - in order to reference a snackbar
key             type: string|number     required: true

<SnackbarProvider
    maxSnack={3}
    action={[
        <Button color="secondary" size="small">My Action</Button>
    ]}
    onClickAction={() => alert('Clicked on my action button.')}
>
    <App />
</SnackbarProvider>

this.props.enqueueSnackbar('Item moved to recently deleted folder.', {
    variant: 'default',
    action: <Button color="secondary" size="small">Undo</Button>,
    onClickAction={() => alert('Clicked on my action button.')}
})