Nightingale Posing Mischievously

    react-notify-toast
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-notify-toast package

    0.5.1 • Public • Published

    Toast Notifications for React.js. Build Status

    Installation

    The recommended way to include this sdk into your project is by using npm. Install it into your project as a dependency with

    $ npm install react-notify-toast --save

    How to use

    To include the modules in the browser context use a bundler tool like Browserify or Webpack.

    Import into your project

    To include this project you need to require the module by using CommonJS syntax or ES6 Modules Syntax (recommended).

    // ES6
    import Notifications, {notify} from 'react-notify-toast';
    /* Notifications is the default export.
       It represents the React Component that contains the notifications.
     
       You can give the default export any name
       but in this example it will be referenced as Notifications */
     

    For best results, render the Notifications component in the higher DOM node possible, such as:

    // react's app render function
    render() {
        return (
            <div className='main'>
                <Notifications />
                ...
            </div>
        )
    }
     

    Then just call a notification with notify.show()

     
    notify.show('Toasty!');
     

    Options

    The toast notification function notify.show() supports message, type and timeout attributes in the following way.

    notify.show(message, type, timeout, color)

    message is the content of the toast notification.

    type consists of three variants:

    • success to render a success notification.
    • warning to render a warning notification.
    • error to render an error notification.
    • custom to render user defined colors for the notification.

    if type is not set, it will render a neutral notification.

    timeout is the time (in milliseconds) the toast will remain on screen. if it's not set, it will display for the default 5000ms time. You can also pass -1 to cause the notification to display persistently.

    color is for the background as well as the text of the notification. It accepts an object with the following properties

    let myColor = { background: '#0E1717', text: "#FFFFFF" };
    notify.show("this is sample text", "custom", 5000, myColor);

    Manual closing

    The notification can be programmatically closed using the hide function, for example, in the click handler of a button in the notification:

    notify.show(
      <div>
        this wont close until you click
        <button onClick={notify.hide}>close</button>
      </div>, "error", -1
    );

    Overriding Defaults

    The <Notification/> component can receive an options property, which can override any value in src/defaults.js

    This is usually useful to modify the zIndex to ensure the toast notifications are displayed on top of other elements with crazy z-index™

    If overwritten, these options will be the default for all subsequent notifications

    Supported Options:

    • wrapperId HTML id property added to the notification container
    • animationDuration time (in milliseconds) used for the hide and show transitions
    • timeout time (in milliseconds) the toast will remain on screen
    • zIndex sets z-index for notification container
    • top sets vertical offset from top of viewport (in any CSS units)
    • colors object that contains supported styles for notifications (can be replaced to support custom color schemes)

    Example:

    // Will display the notifications at z-index: 200, and with a vertical offset of 50px
    <Notification options={{zIndex: 200, top: '50px'}} />

    Note:

    Keep in mind that it can only override topmost values, and not nested values. (i.e. not a deep merge, but a shallow assign).

    Queued Notifications

    A notification queue can be created using the createShowQueue function, for example, in the constructor of a component:

    constructor() {
        super();
        this.show = notify.createShowQueue();
    }

    This queue can then be used with the same API as the notify.show function:

    this.show('Toasty!');

    The createShowQueue function has two optional arguments:

    • initialRecallDelay is how long (in ms) to wait if the first attempt at showing a notification fails (because a non-queued notification was already being shown). Default: 500ms

    • recallDelayIncrement is a time (in ms) added to the recallDelay after each failed attempt. This is to mitigate numerous rapidly-repeated calls in the case of a non-queued notification being shown without a timeout. Default 500ms

    Install

    npm i react-notify-toast

    DownloadsWeekly Downloads

    5,505

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    57.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar