[Toast] Accessing toast provider context

[kieranm]

Hi all,
I'm trying to implement a toast stack like this.

In order to correctly scale and position each toast, we need to know information like...

• How many toasts there are in total
• The index of each toast in the stack
• The height of the most recent toast

What's the best way of accessing this information from within the toast Root component? Can it be accessed via the ToastProvider for example?

Thanks!

[benoitgrelard]

Hi @kieranm,

There is nothing available on Root and the information isn't even available internally anyway as we just portal the toast into the viewport.

As you are the one creating the toasts, you should have all of the necessary information available to you already.

[kieranm]

Hi @benoitgrelard - thanks that makes sense.

I'm not sure if I'm using the <Toast> component wrong/suboptimally, but at the moment I have them scattered throughout the app and invoking them imperatively when needed as the docs suggest. They aren't really "centralised" anywhere and therefore it's difficult to know which/how many toasts are open at any given time. Should I be generating the <Toast>s dynamically in a central location based on state? My understanding breaks down here a bit.

If you have any examples of best practice here I would be grateful

[ryparker]

Same here i've got toasts scattered around my components as needed. Is there a better approach that allows us to know how many are currently rendered so that we can add multiple toasts as a list/stack?

[joaom00]

Hey @ryparker,

Here is a basic stacked toast example, hope it helps.