tomchentw/react-toastr

Only able to open one toast once

eghernqvist opened this issue · 4 comments

Once I've had a toast triggered I cannot trigger another until a fresh page reload has been done.

Here's my code:

var ReactToastr = require('react-toastr');
var { ToastContainer } = ReactToastr;
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);

render() {
  return(
    <div>    
      <ToastContainer ref="container" toastMessageFactory={ToastMessageFactory} />
    </div>  
  );
}

syncToast(message) {
  this.refs.container.success(
    "",
    message, {
    timeOut: 5000
  });
}

sync(id) {
  this.syncToast("Sync successful.")
}

The sync method gets called when I press a button, other things such as console.log and debugger gets triggered fully but not the toast.

@eghernqvist In the options, try sending preventDuplicates:false. Kindly let us know if the issue persists.

That doesn't help, the toastr still happens once.

What @lednhatkhanh wrote. Due to short deadline we had to move to use a different toast implementation.

@lednhatkhanh @eghernqvist To be able to add multiples notifications you just need to add preventDuplicates={false} as a prop of the ToastContainer component. Example:

notify ( type, event ) {
	event.preventDefault();

	const optionsOverride = {
		showAnimation     : 'animated flipInX',
		hideAnimation     : 'animated flipOutX'
	};

	this._notificationSystem._notify( type, "Message", "Title", optionsOverride );
},

render () {
	return (
		<div>
			<button onClick={ this.notify.bind( null, 'success' ) }>Success notification</button>
			<button onClick={ this.notify.bind( null, 'error' ) }>Error notification</button>
			<button onClick={ this.notify.bind( null, 'info' ) }>Info notification</button>
			<button onClick={ this.notify.bind( null, 'warning' ) }>Warning notification</button>
			<ToastContainer
				ref={ ref => this._notificationSystem = ref }
				className="toast-top-right"
				preventDuplicates={ false }
			/>
		</div>
	);
},