Add custom content example

examples/custom-content-example/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/custom-content-example/App.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SnackbarProvider } from 'notistack';
+import MessageButtons from './MessageButtons';
+
+export default () => (
+    <SnackbarProvider maxSnack={3}>
+        <MessageButtons />
+    </SnackbarProvider>
+);

examples/custom-content-example/MessageButtons.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { useSnackbar } from 'notistack';
+import ReportComplete from './ReportComplete';
+
+const styles = {
+    root: {
+        flexGrow: 1,
+        display: 'flex',
+        margin: 16,
+        justifyContent: 'center',
+        alignItems: 'middle',
+    },
+    button: {
+        margin: 8,
+        borderColor: '#313131',
+        color: '#313131',
+    },
+};
+
+const MessageButtons = () => {
+    const { enqueueSnackbar } = useSnackbar();
+
+    const handleClick = () => {
+        enqueueSnackbar("You're report is ready", {
+            anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right',
+            },
+            content: (key, message) => <ReportComplete id={key} message={message} />,
+        });
+    };
+
+    return (
+        <Paper style={styles.root}>
+            <Button variant="outlined" style={styles.button} onClick={handleClick}>
+                Show Snackbar
+            </Button>
+        </Paper>
+    );
+};
+
+export default MessageButtons;

examples/custom-content-example/ReportComplete.js

@@ -0,0 +1,102 @@
+import React, { useState, forwardRef, useCallback } from "react";
+import { makeStyles } from "@mui/styles";
+import { useSnackbar, SnackbarContent } from "notistack";
+import Collapse from "@mui/material/Collapse";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+const useStyles = makeStyles(() => ({
+  root: {
+    "@media (min-width:600px)": {
+      minWidth: "344px !important"
+    }
+  },
+  card: {
+    backgroundColor: "#fddc6c",
+    width: "100%"
+  },
+  typography: {
+    fontWeight: "bold"
+  },
+  actionRoot: {
+    padding: "8px 8px 8px 16px",
+    justifyContent: "space-between"
+  },
+  icons: {
+    marginLeft: "auto"
+  },
+  expand: {
+    padding: "8px 8px",
+    transform: "rotate(0deg)",
+    transition: "all .2s"
+  },
+  collapse: {
+    padding: 16
+  },
+  checkIcon: {
+    fontSize: 20,
+    color: "#b3b3b3",
+    paddingRight: 4
+  },
+  button: {
+    padding: 0,
+    textTransform: "none"
+  }
+}));
+
+const ReportComplete = forwardRef((props, ref) => {
+  const classes = useStyles();
+  const { closeSnackbar } = useSnackbar();
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandClick = useCallback(() => {
+    setExpanded((oldExpanded) => !oldExpanded);
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    closeSnackbar(props.id);
+  }, [props.id, closeSnackbar]);
+
+  return (
+    <SnackbarContent ref={ref} className={classes.root}>
+      <Card className={classes.card}>
+        <CardActions classes={{ root: classes.actionRoot }}>
+          <Typography variant="subtitle2" className={classes.typography}>
+            {props.message}
+          </Typography>
+          <div className={classes.icons}>
+            <IconButton
+              aria-label="Show more"
+              className={classes.expand}
+              style={expanded ? { transform: "rotate(180deg)" } : null}
+              onClick={handleExpandClick}
+            >
+              <ExpandMoreIcon />
+            </IconButton>
+            <IconButton className={classes.expand} onClick={handleDismiss}>
+              <CloseIcon />
+            </IconButton>
+          </div>
+        </CardActions>
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <Paper className={classes.collapse}>
+            <Typography gutterBottom>PDF ready</Typography>
+            <Button size="small" className={classes.button}>
+              <CheckCircleIcon className={classes.checkIcon} />
+              Download now
+            </Button>
+          </Paper>
+        </Collapse>
+      </Card>
+    </SnackbarContent>
+  );
+});
+
+export default ReportComplete;

examples/custom-content-example/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

examples/custom-content-example/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "notistack-custom-content-example",
+  "description": "notistack example of a custom Snackbar content",
+  "repository": {
+    "url": "git+https://github.com/iamhosseindhv/notistack.git",
+    "type": "git"
+  },
+  "author": {
+    "name": "Hossein Dehnokhalaji",
+    "email": "[email protected]",
+    "url": "https://github.com/iamhosseindhv/notistack"
+  },
+  "homepage": "https://github.com/iamhosseindhv/notistack",
+  "bugs": {
+    "url": "https://github.com/iamhosseindhv/notistack/issues"
+  },
+  "contributors": [
+    "Hossein Dehnokhalaji (https://iamhosseindhv.com/)"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "javascript",
+    "material-ui",
+    "mui",
+    "@mui/material",
+    "emotion",
+    "@emotion/react",
+    "@emotion/styled",
+    "stacked",
+    "snackbar",
+    "notification"
+  ],
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "@mui/styles": "5.8.4",
+    "notistack": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "version": "0.0.0",
+  "devDependencies": {
+    "react-scripts": "1.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

examples/custom-content-example/public/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
+    manifest.json provides metadata used when your web app is added to the
+    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+  -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <!--
+    Notice the use of %PUBLIC_URL% in the tags above.
+    It will be replaced with the URL of the `public` folder during the build.
+    Only files inside the `public` folder can be referenced from the HTML.
+
+    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    work correctly both with client-side routing and a non-root public URL.
+    Learn how to configure a non-root public URL by running `npm run build`.
+  -->
+  <title>React App</title>
+
+</head>
+<body>
+  <div id="root"></div>
+  <!--
+    This HTML file is a template.
+    If you open it directly in the browser, you will see an empty page.
+
+    You can add webfonts, meta tags, or analytics to this file.
+    The build step will place the bundled scripts into the <body> tag.
+
+    To begin the development, run `npm start` or `yarn start`.
+    To create a production bundle, use `npm run build` or `yarn build`.
+  -->
+</body>
+</html>