react-mui-notify

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:

Name	Type	Description
duration	Number	Set number of milliseconds to display notification before timeout
anchorOrigin.vertical	String	Position of vertical alignment
anchorOrigin.horizontal	String	Position of horizontal alignment

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