[docs] Add material-ui-snackbar-provider integration demo

docs/next.config.js

@@ -61,6 +61,7 @@ module.exports = withTypescript({
           const hasDependencyOnRepoPackages = [
             'notistack',
             'material-table',
+            'material-ui-snackbar-provider',
             '@material-ui/pickers',
           ].includes(request);
 
@@ -93,7 +94,7 @@ module.exports = withTypescript({
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)(material-table|notistack|@material-ui(\/|\\)pickers)/,
+            include: /node_modules(\/|\\)(material-table|material-ui-snackbar-provider|notistack|@material-ui(\/|\\)pickers)/,
             use: {
               loader: 'babel-loader',
               options: {

docs/package.json

@@ -85,6 +85,7 @@
     "marked": "^0.7.0",
     "material-table": "^1.50.0",
     "material-ui-popup-state": "^1.4.1",
+    "material-ui-snackbar-provider": "^1.3.0",
     "next": "8.1.0",
     "notistack": "^0.9.3",
     "nprogress": "^0.2.0",

docs/src/pages/components/snackbars/IntegrationMaterialUiSnackbarProvider.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import { SnackbarProvider, useSnackbar } from 'material-ui-snackbar-provider';
+
+function MyApp() {
+  const snackbar = useSnackbar();
+
+  const handleClick = () => {
+    snackbar.showMessage('I love snacks.');
+  };
+
+  const handleClickError = () => {
+    snackbar.showMessage('No snacks found.', 'Retry', () => {
+      snackbar.showMessage('Found one!');
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleClick}>Show snackbar</Button>
+      <Button onClick={handleClickError}>Show snackbar with retry button</Button>
+    </React.Fragment>
+  );
+}
+
+export default function MaterialUiSnackbarProviderIntegration() {
+  return (
+    <SnackbarProvider SnackbarProps={{ autoHideDuration: 4000 }}>
+      <MyApp />
+    </SnackbarProvider>
+  );
+}

docs/src/pages/components/snackbars/IntegrationMaterialUiSnackbarProvider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import { SnackbarProvider, useSnackbar } from 'material-ui-snackbar-provider';
+
+function MyApp() {
+  const snackbar = useSnackbar();
+
+  const handleClick = () => {
+    snackbar.showMessage('I love snacks.');
+  };
+
+  const handleClickError = () => {
+    snackbar.showMessage('No snacks found.', 'Retry', () => {
+      snackbar.showMessage('Found one!');
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleClick}>Show snackbar</Button>
+      <Button onClick={handleClickError}>Show snackbar with retry button</Button>
+    </React.Fragment>
+  );
+}
+
+export default function MaterialUiSnackbarProviderIntegration() {
+  return (
+    <SnackbarProvider SnackbarProps={{ autoHideDuration: 4000 }}>
+      <MyApp />
+    </SnackbarProvider>
+  );
+}

docs/src/pages/components/snackbars/snackbars.md

@@ -81,3 +81,12 @@ notistack makes it easy to display snackbars (so you don't have to deal with ope
 It also enables you to stack them on top of one another (although this is discouraged by the specification).
 
 {{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
+
+### material-ui-snackbar-provider
+
+![stars](https://img.shields.io/github/stars/TeamWertarbyte/material-ui-snackbar-provider.svg?style=social&label=Stars)
+![npm downloads](https://img.shields.io/npm/dm/material-ui-snackbar-provider.svg)
+
+In the following example, we demonstrate how to use [material-ui-snackbar-provider](https://github.com/TeamWertarbyte/material-ui-snackbar-provider). It provides an imperative API to display snackbarsand simplifies implementing undo/redo patterns.
+
+{{"demo": "pages/components/snackbars/IntegrationMaterialUiSnackbarProvider.js"}}

yarn.lock

@@ -9647,6 +9647,13 @@ material-ui-popup-state@^1.4.1:
     "@babel/runtime" "^7.1.5"
     prop-types "^15.0.0"
 
+material-ui-snackbar-provider@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/material-ui-snackbar-provider/-/material-ui-snackbar-provider-1.3.0.tgz#9c358dc306e6becfecf6c261f7f7adb3595aa71e"
+  integrity sha512-j7pZyyxTz9G+uEbX7PLNtn/60Kg7n5OTsSL3AcfhIWHs84SuGFLX+MdSlaAiYgGmbximWo7TfMC6ryVunqk7dg==
+  dependencies:
+    prop-types "^15.5.8"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"