Mui-gotit NPM | npm.io

mui-gotit

Enhanced Snackbars for Material UI 5 and React 17 with imperative flavor. Inpsired by notistack - Working with Material UI 5 Theming and sx property.

This library will be kept as simple as possible to allow easy upgrades to newer versions of MUI and allow anybody to customize this library to their need.

Live Demo

Installation

npm i mui-gotit

import { Gotit, GotitContext } from "mui-gotit";
import { useContext } from "react";
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import Alert from "@mui/material/Alert";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { blue } from "@mui/material/colors";
import Button from "@mui/material/Button";

const theme = createTheme({
  palette: {
    primary: {
      main: blue[500]
    }
  }
});

function ExampleNotificator() {
  const gotitContext = useContext(GotitContext);
  return (
    <Button
      onClick={() => {
        gotitContext.displayNotification({
          snackbar: {
            open: true,
            autoHideDuration: 4000,
            anchorOrigin: { vertical: "bottom", horizontal: "right" }
          },
          gotit: {
            group: "main",
            stackDirection: "top",
            space: 10,
            component: (
              <Alert
                severity={"success"}
                sx={{ backgroundColor: "primary.dark" }}
              >
                <div
                  css={css`
                    color: white;
                  `}
                >
                  {`a simple mui-gotit snack wit a random number `}
                  {Math.random()}
                </div>
              </Alert>
            )
          }
        });
      }}
    >
      display a notification
    </Button>
  );
}

export default function App() {
  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Gotit debug={false}>
          <ExampleNotificator />
        </Gotit>
      </ThemeProvider>
    </div>
  );
}

Docs

You can access the following functions from the gotitContext.

`gotitContext.displayNotification(option)`

The option argument looks like this:

let option = 
{
    // the snackbar properties passed to the MUI <Snackbar/> element.
    snackbar: {
      open: true,
      autoHideDuration: 4000,
      anchorOrigin: { vertical: "top", horizontal: "right" }
    },
    gotit: {
      // group: string. Used to logically group notifications. All notifications of a group
      // are subject to the css transitions
      group: "app-main",
      // stackDirection: string. One of "top" or "bottom". If "top" is assigned, then the notification will
      // stack upwards. If "bottom" is assigned, they will stack downwards.
      stackDirection: "bottom",
      // maxSnackbars: integer. The max number of notifications that are displayed in a group.
      // The oldest notification will be removed if the max nr of notifications is reached.
      maxSnackbars: 3,
      // zIndexBase: int. The minimum z-index. Helps to put Snackbars on top of modals. 
      zIndexBase: 9999,
      // space: number. The distance in pixels from the previous notification
      space: 15,
      // emotionCssString: string. The cssString passed to emotion as a property of the
      // Snackbar element. e.g. <Snackbar css={css`${<<theEmotionCssString>>}`}/> 
      emotionCssString: `
          color: red;
          .MuiSnackbar-root {
            color: red;
          }
          .MuiSnackbarContent-root {
            color: orange;
          }
          .MuiSnackbarContent-message {
            color: orange;
          }
          .MuiSnackbarContent-action {
            color: orange;
          }
          `,
      // component: a react component. Pass any react element as a child of the Snackbar.
      component: (
        <Alert
          severity={"error"}
          sx={{ backgroundColor: "primary.dark" }}
        >
          <div
            css={css`
              color: blue;
            `}
          >
            {`a simple mui-gotit snack `}
            {Math.random()}
          </div>
        </Alert>
      )
    }
}

returns the option containing the id of the notification, useful to close it later. E.g.

let handleOption = gotitContext.displayNotification({...});
gotitContext.removeNotification(handleOption.gotit.id);

`gotitContext.removeNotification(notificationHandle)`

Removes the notification. Pass in the return value of the displayNotification function.

`gotitContext.removeNotificationGroup(notificationGroup)`

Removes all the notification of the group.

let handleOption = gotitContext.displayNotification({
  // ...other code
  gotit: { group: 'myGroup'}
  // ...other code
});
gotitContext.removeNotification(handleOption.gotit.group);
// or
gotitContext.removeNotification('myGroup');

Hack on it

Edit src/gotit-pragma-automatic.js
Start the demo app in watch mode: npm run watch
Run Jest and Cypress tests npm run test
Build the library running npm run rollup
Publish it on npm: npm publish

mui-gotit v1.1.1