@dccs/react-notification-mui

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	undefiend`
enableClickAway	`boolean	undefiend`
transitionDuration	`number	undefiend`
snackBarStyle	`React.CSSProperties	undefiend`
snackBarMessageStyle	`React.CSSProptiers	undefiend`
snackBarMessageVariant	ThemeStyle`	undefiend`
snackBarTitleStyle	`React.CSSProptiers	undefiend`
snackBarTitleVariant	ThemeStyle`	undefiend`
title	`string	React.ReactNode
action	`React.ReactNode	undefiend`

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