Skip to content

Commit bf0a29f

Browse files
committed
updating copy to include explaination of UNSTABLE
1 parent 26a5f2f commit bf0a29f

File tree

2 files changed

+9
-2
lines changed

2 files changed

+9
-2
lines changed

packages/@react-aria/overlays/docs/PortalProvider.mdx

+8-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ Modals, Popovers, Toasts, and Tooltips will portal their overlay element to. Thi
3434
your app is already portalling other elements to a location other than the `document.body` and thus requires
3535
your React Aria components to send their overlays to the same container.
3636

37+
Please note that `UNSTABLE_PortalProvider` is considered `UNSTABLE` because it is an escape hatch, and there are
38+
many places that an application could portal to. Not all of them will work, either with styling, accessibility,
39+
or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,
40+
outside of any possible overflow or stacking contexts. We envision `UNSTABLE_PortalProvider` being used to group all of the portalled
41+
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
42+
that need to do otherwise.
43+
3744
## Props
3845

3946
<PropTable links={docs.links} component={docs.exports.UNSTABLE_PortalProvider} />
@@ -89,7 +96,7 @@ function App() {
8996
title: 'Toast complete!',
9097
description: 'Great success.'
9198
})}>
92-
Toast
99+
Open Toast
93100
</Button>
94101
</UNSTABLE_PortalProvider>
95102
<div ref={container} style={{height: '70px', width: '200px', overflow: 'auto'}}>

packages/@react-aria/overlays/src/PortalProvider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import React, {createContext, ReactNode, useContext} from 'react';
1515
export interface PortalProviderProps {
1616
/** Should return the element where we should portal to. Can clear the context by passing null. */
1717
getContainer?: () => HTMLElement | null,
18-
/** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided getContainer(). */
18+
/** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided `getContainer()`. */
1919
children: ReactNode
2020
}
2121

0 commit comments

Comments
 (0)