Multiple Notification

[dhruv004]

How will I be able to get multiple notifications at the same time.
What i tried to do was

array.forEach(function(element){
   notify.show(element.message,'error',3000);
});

I get only the first notification.What I want is to get multiple notification

[jesusoterogomez]

This is something that I have also needed recently. and might make a new version that includes support for this. As it requires some re-engineering of the component. As it stands right now, it's using a single element to display the message. which makes it impossible to queue messages. (or show various messages at the same time, for that matter).

Though, it is hackable.

If you require this really soon. A solution could be to iterate with an interval that lasts the same time as each notification

[Patrick-W-McMahon]

What about have the element have a toast queue. it pops the top message off and displays it. once finished with displaying that message for the time set for that message it fades out then fades back in with the next message and so on. Just like how android does it. In android only one toast message is displayed at a time and all toast messages are sent to a queue that the toast element handles with poping the top element off the queue.

[Patrick-W-McMahon]

there could be a config option to display all toast messages in the queue at once by stacking them. But that should be an option that is turned off by default as most people don't expect that as a default behavior for a toast message.

[alsiola]

If anyone is interested in a solution for this then I am using the below successfully:

import { notify } from 'react-notify-toast';

const notifier = new stackedShow();

export default (msg, type, timeout, color) => notifier(msg, type, timeout, color);

function stackedShow() {
    this.msgs = [];
    this.isNotifying = false;

    this.showNotify = function() {
        if (this.msgs.length === 0) {
            this.isNotifying = false;
            return;
        }

        const current = this.msgs.pop();
        this.isNotifying = true;
        notify.show(current.msg, current.type, current.timeout, current.color);
        
        if (current.timeout > 0) {
            setTimeout(() => this.showNotify(), current.timeout + 300);
        }
    }

    return (msg, type, timeout, color) => {
        this.msgs.push({msg, type, timeout, color});
        if (!this.isNotifying) {
            this.showNotify();
        }
    }
}

This could be added to the library as a separate named export. If you are willing to accept a PR for this feature I am happy to contribute.

[alsiola]

I have created a PR for a modified version of the above code. #22

[jesusoterogomez]

Thank you very much. Thank you for not responding sooner. I will review this PR soon.

Incidentally. I have something planned for queueing for the new version of the library. (It's mostly a rewrite that will be self mountable, in a way that you will not be locked to React to use it). But your contribution will definitely help for that.. you can also see it if you're interested in the branch dev-channel

It's great that your contribution brings the feature to the current version.

[jesusoterogomez]

This was closed by #22