react-notification-mui ·

Simple Notifications https://dccs-it-business-solutions.github.io/react-notification-mui/

Installation

You should install react-notification-mui with npm or yarn:

npm install @dccs/react-notification-mui
or
yarn add @dccs/react-notification-mui

This command will download and install react-notification-mui

How it works

To use display notifications wrap you application with the NotificationContextProvider

<NotificationContextProvider>
  <YourApp />
</NotificationContextProvider>

How to display notifications

The NotificationContextProvider provides the following functions:

addInfo, addWarning, addError

Parameters:

Usage:

function DisplayNotifications() {
  const { addInfo, addWarning, addError } =
    React.useContext < INotificationContext > NotificationContext;
  function handleClick() {
    addInfo("my message");
    addWarning("my message");
    addError("my message");

    addInfo(<span>my message</span>);
    addWarning(<span>my message</span>);
    addError(<span>my message</span>);

    addInfo("my message", "my title");
    addWarning("my message", "my title");
    addError("my message", "my title");

    addInfo(<span>my message</span>, <span>my mytitle</span>);
    addWarning(<span>my message</span>, <span>my mytitle</span>);
    addError(<span>my message</span>, <span>my mytitle</span>);
  }

  return <div onClick={handleClick}>Show Notifications</div>;
}

addCustomNotification

If you want to display a custom notification you can use the addCustomNotification method.

Parameters:

notification: ICustomNotificationProps

ICustomNotificationProps

| Name | Type | Default | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- | | message | string|React.ReactNode | | | autoHideDuration | number|undefiend | undefined | | enableClickAway | boolean|undefiend | false | | transitionDuration | number|undefiend | 750 | | snackBarStyle | React.CSSProperties|undefiend | undefined | | snackBarMessageStyle | React.CSSProptiers|undefiend | undefined | | snackBarMessageVariant | ThemeStyle|undefiend | body1 | | snackBarTitleStyle | React.CSSProptiers|undefiend | undefined | | snackBarTitleVariant | ThemeStyle|undefiend | h6 | | title | string|React.ReactNode|undefiend | undefined | | action | React.ReactNode|undefiend | a close button, that dissmises the notification |

ThemeStyle

Usage:

function DisplayMyCustomNotification(){
 const { addCustomNotification } =
    React.useContext < INotificationContext > (NotificationContext);

  function handleClick(){
    addCustomNotification({message:"my message"});
  }

  return <Butonn onClick={handleClick}>Show Custom Notifications</Button>
}

How to customize notifications shown by addInfo, addWarning, addError

You are able to customize the look of the info, warning and error notifications threw properties given to to the NotificationContextProvider

Contributing

License

@dccs/react-notification-mui is MIT licensed