A React portal renders React children into a DOM node outside their parent component’s DOM hierarchy. This makes it suitable for UI that must escape local layout constraints while remaining part of a React application. section 13.2.3
A toast provider can use a portal to display messages globally at the bottom-center of the browser window, regardless of where the provider sits in the DOM. The portal solves placement; the surrounding toast design still owns dismissal, persistence, timing, styling, and accessibility. section 13.2.3
Apply the pattern through a toast architecture:
- Wrap the relevant application area with a toast provider. section 13.2.3
- Expose a useToast hook that invokes new messages. section 13.2.3
- Render the toast output through a portal so provider location does not determine browser-window placement. section 13.2.3
- Support primary and inverted styles, optional dismissal, automatic three-second removal, persistent messages, and polite WAI-ARIA live-region behavior. section 13.2.3
Portal-backed toast usage
Wrap the application with <ToastProvider><App /></ToastProvider>, then obtain the invocation function with const addToast = useToast(); and call addToast({ message: "This is the toast message", canDismiss: false, isPersistent: false, isOutline: false }). The provider can render the resulting message through a portal at the required global position. section 13.2.3
