tomchentw/react-toastr

How to set toast options?

mirko77 opened this issue · 3 comments

mirko77 commented

Hi there,

how do I change the toast options?

I tried:

showToastSuccess(message) {
        this.refs.container.success(message, '', {
            closeButton: true,
            timeOut: 3000,
            extendedTimeOut: 0,
            showMethod: 'fadeIn',
            hideMethod: 'fadeOut',
            preventDuplicates: true
        });
    }

but the animation is always the bouncing one, not the fade one.

Timeout options seem to work, though.

RangarajKaushikSundar commented

@mirko77 When you mount the toaster, if you use this -
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation)
It will not work. You have to use
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.jQuery)
This is because, the fadeIn and fadeOut are defined inside jQueryMixin file.
Hope this was helpful!
Kaushik.

mirko77 commented

Thanks @RangarajKaushikSundar , I suppose that will require jQuery as a dependency defined somewhere?
Otherwise, I get jQueryMixin.js:74 Uncaught (in promise) ReferenceError: jQuery is not defined(…)

also, I am using the latest React with ES6 therefore no mixins, no getDefaultProps etc...

edit: adding jQuery I get jQueryMixin.js:14 Uncaught (in promise) TypeError: $node[props.showMethod] is not a function(…)

mirko77 commented

I solved it passing:

showAnimation: 'animated fadeIn',
hideAnimation: 'animated fadeOut'
  • 👍1