Skip to content

Latest commit

 

History

History
118 lines (81 loc) · 5.86 KB

README.md

File metadata and controls

118 lines (81 loc) · 5.86 KB
Raw

react-notification-mui · travis build npm version

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