Modal and Toast dynamic global approach
Unanswered
Hilsa shad posted this in #help-forum
Hilsa shadOP
Hi! I'm working on a NextJS (App routes) project with TailwindCSS.
I need to implement Modals and Toasts and wanted to make sure I'm using the best approach possible so I have just one instance in the DOM instead of rendering a component for each part on the app that I use them.
I'm using RadixUI Dialog and Toast components which work great.
My idea is:
- Creating a ToastProvider and ModalProvider that wraps the children inside <body>, thus making sure I have just one instance of both components.
- Then implementing a Zustand store to update the children, title, description and everything I need from any part of the application.
So I'd basically call the Zustand store hooks from anywhere to control the state of any Modal and Toast I want to show.
What do you think of this approach? It'd be great listening to new proposals with their justifications.
Any opinion is well received 🤗
I need to implement Modals and Toasts and wanted to make sure I'm using the best approach possible so I have just one instance in the DOM instead of rendering a component for each part on the app that I use them.
I'm using RadixUI Dialog and Toast components which work great.
My idea is:
- Creating a ToastProvider and ModalProvider that wraps the children inside <body>, thus making sure I have just one instance of both components.
- Then implementing a Zustand store to update the children, title, description and everything I need from any part of the application.
So I'd basically call the Zustand store hooks from anywhere to control the state of any Modal and Toast I want to show.
What do you think of this approach? It'd be great listening to new proposals with their justifications.
Any opinion is well received 🤗