PortalProvider

Sets the portal container for all overlay elements rendered by its children.

Introduction#

UNSTABLE_PortalProvider is a utility wrapper component that can be used to set where components like Modals, Popovers, Toasts, and Tooltips will portal their overlay element to. This is typically used when 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.

Props#

Example#

The example below shows how you can use UNSTABLE_PortalProvider to portal your Toasts to an arbitrary container. Note that the Toast in this example is taken directly from the React Aria Components Toast documentation, please visit that page for a detailed explanation of its implementation.

import {UNSTABLE_PortalProvider} from 'react-aria';
function App() {
  let container = React.useRef(null);
  return (
    <>
      <UNSTABLE_PortalProvider getContainer={() => container.current}>
        <MyToastRegion />
        <Button
          onPress={() =>
            queue.add({
              title: 'Toast complete!',
              description: 'Great success.'
            })}
        >
          Toast
        </Button>
      </UNSTABLE_PortalProvider>
      <div
        ref={container}
        style={{ height: '70px', width: '200px', overflow: 'auto' }}
      >
        Toasts are portalled here!
      </div>
    </>
  );
}

<App />

import {UNSTABLE_PortalProvider} from 'react-aria';
function App() {
  let container = React.useRef(null);
  return (
    <>
      <UNSTABLE_PortalProvider
        getContainer={() => container.current}
      >
        <MyToastRegion />
        <Button
          onPress={() =>
            queue.add({
              title: 'Toast complete!',
              description: 'Great success.'
            })}
        >
          Toast
        </Button>
      </UNSTABLE_PortalProvider>
      <div
        ref={container}
        style={{
          height: '70px',
          width: '200px',
          overflow: 'auto'
        }}
      >
        Toasts are portalled here!
      </div>
    </>
  );
}

<App />

import {UNSTABLE_PortalProvider} from 'react-aria';
function App() {
  let container = React
    .useRef(null);
  return (
    <>
      <UNSTABLE_PortalProvider
        getContainer={() =>
          container
            .current}
      >
        <MyToastRegion />
        <Button
          onPress={() =>
            queue.add({
              title:
                'Toast complete!',
              description:
                'Great success.'
            })}
        >
          Toast
        </Button>
      </UNSTABLE_PortalProvider>
      <div
        ref={container}
        style={{
          height: '70px',
          width: '200px',
          overflow:
            'auto'
        }}
      >
        Toasts are
        portalled here!
      </div>
    </>
  );
}

<App />

Contexts#

The getContainer set by the nearest PortalProvider can be accessed by calling useUNSTABLE_PortalContext. This can be used by custom overlay components to ensure that they are also being consistently portalled throughout your app.

import {useUNSTABLE_PortalContext} from 'react-aria';

function MyOverlay(props) {
  let { children } = props;
  let { getContainer } = useUNSTABLE_PortalContext();
  return ReactDOM.createPortal(children, getContainer());
}

import {useUNSTABLE_PortalContext} from 'react-aria';

function MyOverlay(props) {
  let { children } = props;
  let { getContainer } = useUNSTABLE_PortalContext();
  return ReactDOM.createPortal(children, getContainer());
}

import {useUNSTABLE_PortalContext} from 'react-aria';

function MyOverlay(
  props
) {
  let { children } =
    props;
  let { getContainer } =
    useUNSTABLE_PortalContext();
  return ReactDOM
    .createPortal(
      children,
      getContainer()
    );
}