Prepare next to be published as latest (#436)

* Add tag for people on mui-v4

* Update simple example

* Update simple example

* Update redux example

* Update mobx example

* Minor

* Update next --> latest in example codes

* Update docs

README.md

@@ -37,6 +37,12 @@ npm install notistack
 yarn add notistack
 ```
 
+If you're using Material-UI version 4.x.x or lower, download a compatible version of notistack using:
+```
+npm install notistack@latest-mui-v4
+yarn add notistack@latest-mui-v4
+```
+
 ### How to use
 
 **1:** Wrap your app inside a `SnackbarProvider` component: (see [docs](https://iamhosseindhv.com/notistack/api) for a full list of available props)

examples/mobx-example/App.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { inject, observer } from 'mobx-react';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 import Notifier from './Notifier';
 
 class App extends Component {
@@ -21,7 +21,7 @@ class App extends Component {
                 <Typography variant="h4" gutterBottom>
                     Notistack mobx example
                 </Typography>
-                <Button variant="contained" onClick={this.handleClick}>
+                <Button variant="outlined" onClick={this.handleClick}>
                     Display snackbar
                 </Button>
             </Fragment>

examples/mobx-example/package.json

@@ -7,26 +7,36 @@
     "type": "git"
   },
   "main": "src/index.js",
+  "keywords": [
+    "react",
+    "javascript",
+    "material-ui",
+    "mui",
+    "@mui/material",
+    "emotion",
+    "@emotion/react",
+    "@emotion/styled",
+    "stacked",
+    "snackbar",
+    "notification",
+    "mobx",
+    "mobxjs"
+  ],
   "dependencies": {
-    "@material-ui/core": "^4.0.0",
-    "react": "latest",
-    "react-dom": "latest",
-    "react-scripts": "1.1.4",
-    "mobx": "^5.9.0",
-    "mobx-react": "^5.4.3",
-    "notistack": "latest"
+      "@emotion/react": "latest",
+      "@emotion/styled": "latest",
+      "@mui/material": "latest",
+      "notistack": "latest",
+      "react": "latest",
+      "react-dom": "latest",
+      "react-scripts": "latest",
+      "mobx": "^5.9.0",
+      "mobx-react": "^5.4.3"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  },
-  "keywords": [
-    "notistack",
-    "mobx",
-    "react",
-    "mobxjs"
-  ]
+  }
 }

examples/redux-example/App.js

@@ -1,14 +1,15 @@
 import React, { Fragment } from 'react';
 import { useDispatch } from 'react-redux';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Notifier from './Notifier';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import useNotifier from './useNotifier';
 import {
     enqueueSnackbar as enqueueSnackbarAction,
     closeSnackbar as closeSnackbarAction,
 } from './redux/actions';
 
 const App = () => {
+    useNotifier();
     const dispatch = useDispatch();
     const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args));
     const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args));
@@ -36,11 +37,9 @@ const App = () => {
 
     return (
         <Fragment>
-            <Notifier />
             <Typography variant="h4" gutterBottom>Notistack redux example</Typography>
-
-            <Button variant="contained" onClick={handleClick}>Display snackbar</Button>
-            <Button variant="contained" onClick={handleDimissAll}>Dismiss all snackbars</Button>
+            <Button variant="outlined" onClick={handleClick}>Display snackbar</Button>
+            <Button variant="outlined" onClick={handleDimissAll}>Dismiss all snackbars</Button>
         </Fragment>
     );
 };