react-mui-notify v0.0.8

React Material UI Notify

Simple notification package using React and Material UI. An example can be found within with demo directory of this repo.

Install

npm install --save react-mui-notify

Configuration

Config object have the following attributes:

The default config object is below.

  const config = {
    duration: 5000,
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left',
    },
  };

A global configuration object can be passed to the NotificationProvider as such

<NotificationProvider config={config}>
  {children}
</NotificationProvider>

or configuration options set per notification basis. If no config parameter is passed to the setNotification call the global config settings are used, eg. the config option passed to the NotificationProvider or default config if not object was passed as a prop on the NotificationProvider

const handleClick = () => {
    setNotification({
      ...
      ...
      config: config
    });
  };

Usage

import React from 'react';

import { NotificationProvider } from 'react-mui-notify';
import Button from '@mui/material/Button';
import { useNotify } from 'react-mui-notify';

const NotifyButton = () => {
  const { setNotification } = useNotify();

  const handleClick = () => {
    setNotification({
      message: 'This is a notification',
      type: 'success',
    });
  };

  return (
    <Button onClick={handleClick} variant="contained" color="success">
      Demo Notify
    </Button>
  );
};

function App() {
  return (
    <NotificationProvider>
      <NotifyButton />
    </NotificationProvider>
  );
}

export default App;

Notes

• In order to use theming the NotificationProvider will have to be within the ThemeProvider eg.

<ThemeProvider theme={theme}>
  <NotificationProvider>
    {children}
  </NotificationProvider>
</ThemeProvider>

License

MIT © subaquatic-pierre