Feature Request: Toast root position option

[vladoyoung]

Is your feature request related to a problem? Please describe. Sometimes I want to display a toast within an element rather than absolutely within the root of my <Reshaped/> component. Here's an example of where I'd put a toast if I had the option to specify the root:

Describe the solution you'd like The option to define the root of the Toast component. Either within each useToast(), specifying a JSX element somewhere within the app or a general settings change somewhere. If you might support multiple roots, then the position specification should be best put on useToast() then, I suppose.

Describe alternatives you've considered No alternatives, just sticking with the default absolute root position for now.

Additional context Apologies if this is already possible! Please let me know if it is!

Here's a reference: An option similar to what I'm suggesting exists on the Winbox.js library. The root: ... option

[blvdmitry]

Writing some tests and shipping it as a patch right after, docs will follow-up in the next minor release

API for this stays quite minimalistic, you will just have to wrap any area of your application with a ToastProvider (Reshaped provider has one by default already, that's how we render them globally). That will make the toast regions to be using position: absolute instead of fixed which also means toasts will be displayed based on the closest position: relative parent. Important part there is due to how React context works, useToast calls should be done from the component rendered inside this ToastProvider to make sure it's not calling the methods of the root provider instead. All the original toast features are supported, including the position regions

https://github.com/formaat-design/reshaped/assets/887379/34a06ff9-1f0a-4442-b713-485046ae8c6d

[blvdmitry]

Published in 2.10.6

[vladoyoung]

Absolutely amazing!