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

addCustomNotification

addInfo, addWarning, addError

Parameters:

message: string | React.ReactNode

title?: string | React.ReactNode

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|undefined	undefined
enableClickAway	boolean|undefined	false
transitionDuration	number|undefined	750
snackBarStyle	React.CSSProperties|undefined	undefined
snackBarMessageStyle	React.CSSProptiers|undefined	undefined
snackBarMessageVariant	ThemeStyle|undefined	body1
snackBarTitleStyle	React.CSSProptiers|undefined	undefined
snackBarTitleVariant	ThemeStyle|undefined	h6
title	string|React.ReactNode|undefined	undefined
action	React.ReactNode|undefined	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