Need private packages and team management tools?Check out npm Teams »

@dccs/react-notification-mui

0.0.5 • Public • Published

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|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

    Install

    npm i @dccs/react-notification-mui

    DownloadsWeekly Downloads

    1

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    4.6 MB

    Total Files

    44

    Last publish

    Collaborators

    • avatar