Skip to content

chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Apr 7, 2025
9 changes: 8 additions & 1 deletion packages/@react-aria/overlays/docs/PortalProvider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ Modals, Popovers, Toasts, and Tooltips will portal their overlay element to. Thi
your app is already portalling other elements to a location other than the `document.body` and thus requires
your React Aria components to send their overlays to the same container.

Please note that `UNSTABLE_PortalProvider` is considered `UNSTABLE` because it is an escape hatch, and there are
many places that an application could portal to. Not all of them will work, either with styling, accessibility,
or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,
or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, e.g. the `body` element,

outside of any possible overflow or stacking contexts. We envision `UNSTABLE_PortalProvider` being used to group all of the portalled
elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases
that need to do otherwise.

## Props

<PropTable links={docs.links} component={docs.exports.UNSTABLE_PortalProvider} />
Expand Down Expand Up @@ -89,7 +96,7 @@ function App() {
title: 'Toast complete!',
description: 'Great success.'
})}>
Toast
Open Toast
</Button>
</UNSTABLE_PortalProvider>
<div ref={container} style={{height: '70px', width: '200px', overflow: 'auto'}}>
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-aria/overlays/src/PortalProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import React, {createContext, ReactNode, useContext} from 'react';
export interface PortalProviderProps {
/** Should return the element where we should portal to. Can clear the context by passing null. */
getContainer?: () => HTMLElement | null,
/** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided getContainer(). */
/** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided `getContainer()`. */
children: ReactNode
}

Expand Down