notistack

Install the notistack package using your preferred package manager.

npm install notistack
yarn add notistack

The withSnackbar Higher-order component (HOC) has been removed. To migrate, you have two options:

1. Functional Components: Convert your component to a functional component and use the useSnackbar hook.
2. Direct Imports: Remove the HOC and import enqueueSnackbar or closeSnackbar directly from notistack to use them within your component logic.

// Before
import { withSnackbar } from 'notistack' 

class MyButton extends React.Component {
    render() {
       const { enqueueSnackbar } = this.props
    }
}
export default withSnackbar(MyButton)

// After (Option 2: Direct Imports)
import { enqueueSnackbar, closeSnackbar } from 'notistack' 

class MyButton extends React.Component {
    render() {
        // Use enqueueSnackbar directly from the import
    }
}
export default MyButton

In v2, HTML attributes (like data-* attributes) applied to the Snackbar root component must now be passed through the SnackbarProps object instead of being passed directly to the provider or the enqueue function. This applies to both the SnackbarProvider configuration and individual enqueueSnackbar calls.

// Provider configuration
<SnackbarProvider
    SnackbarProps={{
        'data-test': 'test',
    }}
>

// Individual snackbar call
enqueueSnackbar('message', {
    SnackbarProps: {
       'data-test': 'test',
    },
})

Depending on your project's Material-UI version, you may need to install a specific version of notistack to satisfy peer dependency requirements:

• v3.x.x: Latest stable release. It is standalone and does not depend on Material-UI.
• <= v2.0.8: Requires Material-UI v5 as a peer dependency. Install via npm install notistack@2.0.8.
• <= 1.0.10: Requires Material-UI <= v4 as a peer dependency. Install via npm install notistack@latest-mui-v4.

You can explore a live implementation of Notistack integrated with Redux using the CodeSandbox demo. This example demonstrates how to trigger snackbar notifications within a Redux-managed application state.

https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example

For a more idiomatic React approach, use the useSnackbar hook. Note that the component calling the hook must be a child of the SnackbarProvider to access the context.

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
};

To show notifications, wrap your application in a SnackbarProvider and use the enqueueSnackbar function. This approach is useful for triggering notifications from outside the React component tree or in simple setups.

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
  return (
    <div>
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
    </div>
  );
};

You can explore the integration of Notistack with MobX by viewing the live demo on CodeSandbox.

https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/mobx-example

When upgrading to v2, be aware of the following removals and deprecations:

• Deprecated: The content prop is deprecated and will be removed in future releases. Use the Components prop for custom content instead.
• Removed: ariaAttributes prop (use custom components for aria-attributes).
• Removed: Transition callbacks resumeHideDuration, onEntering, and onExisting.
• Removed: onClose no longer returns reason: 'clickaway'.
• Removed: Customization via classes.variant(Success|Error|Info|Warning). Use the Components prop for variant-specific styling.
• Theme Limitation: Material-UI theme overrides (including Dark/Light mode toggling) are not automatically applied to snackbar elements. Use a custom component to ensure snackbars react to theme changes.