Different toast position in a single component

[vishgoel007]

Currently in a component we can show toast only at a single position. What i wanted to do is show some toast at top and some at centre. Similarly for background color, we can't set different background colors for different toasts in a component.

[RogerKikkas]

You can create multiple Toasts in a component with different refs. So something like this.

<Toast ref={this.successToast} position="top" style={{ backgroundColor: 'green' }} />
<Toast ref={this.errorToast} position="center" style={{ backgroundColor: 'red' }} />

In the constructor you create refs (this.successToast = React.createRef()) for both of them and then call the ref that you want to show.