More portal examples

packages/react/portal/src/Portal.tsx

@@ -17,7 +17,7 @@ interface PortalProps extends PrimitiveDivProps {
   /**
    * An optional container where the portaled content should be appended.
    */
-  container?: HTMLElement | null;
+  container?: Element | null;
 }
 
 const Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {

ssr-testing/app/alert-dialog/page.tsx

@@ -8,21 +8,24 @@ import {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogPortal,
 } from '@radix-ui/react-alert-dialog';
 
 export default function Page() {
   return (
     <AlertDialog>
       <AlertDialogTrigger>delete everything</AlertDialogTrigger>
-      <AlertDialogOverlay />
-      <AlertDialogContent>
-        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-        <AlertDialogDescription>
-          This will do a very dangerous thing. Thar be dragons!
-        </AlertDialogDescription>
-        <AlertDialogAction>yolo, do it</AlertDialogAction>
-        <AlertDialogCancel>maybe not</AlertDialogCancel>
-      </AlertDialogContent>
+      <AlertDialogPortal>
+        <AlertDialogOverlay />
+        <AlertDialogContent>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will do a very dangerous thing. Thar be dragons!
+          </AlertDialogDescription>
+          <AlertDialogAction>yolo, do it</AlertDialogAction>
+          <AlertDialogCancel>maybe not</AlertDialogCancel>
+        </AlertDialogContent>
+      </AlertDialogPortal>
     </AlertDialog>
   );
 }

ssr-testing/app/portal/conditional-portal.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import { Portal } from '@radix-ui/react-portal';
+
+export const ConditionalPortal = () => {
+  const [container, setContainer] = React.useState<Element | null>(null);
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <button onClick={() => setOpen((prev) => !prev)}>Toggle another portal</button>
+      <b ref={setContainer} />
+      {open && (
+        <Portal container={container}>
+          <span>This content is rendered in a custom container</span>
+        </Portal>
+      )}
+    </div>
+  );
+};

ssr-testing/app/portal/custom-portal-container.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+import { Portal } from '@radix-ui/react-portal';
+
+export const CustomPortalContainer = () => {
+  const [container, setContainer] = React.useState<Element | null>(null);
+  return (
+    <div>
+      <em ref={setContainer} />
+      <Portal container={container}>
+        <span>This content is rendered in a custom container</span>
+      </Portal>
+    </div>
+  );
+};

ssr-testing/app/portal/page.tsx

@@ -1,30 +1,40 @@
 import * as React from 'react';
 import { Portal } from '@radix-ui/react-portal';
+import { CustomPortalContainer } from './custom-portal-container';
+import { ConditionalPortal } from './conditional-portal';
 
 export default function Page() {
   return (
-    <div
-      style={{
-        maxWidth: 300,
-        maxHeight: 200,
-        overflow: 'auto',
-        border: '1px solid',
-      }}
-    >
-      <h1>This content is rendered in the main DOM tree</h1>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque
-        facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo
-        laboriosam necessitatibus eius pariatur.
-      </p>
-
-      <Portal>
-        <h1>This content is rendered in a portal (another DOM tree)</h1>
+    <div>
+      <div
+        style={{
+          maxWidth: 300,
+          maxHeight: 200,
+          overflow: 'auto',
+          border: '1px solid',
+        }}
+      >
+        <h1>This content is rendered in the main DOM tree</h1>
         <p>
-          Because of the portal, it can appear in a different DOM tree from the main one (by default
-          a new element inside the body), even though it is part of the same React tree.
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque
+          facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo
+          laboriosam necessitatibus eius pariatur.
         </p>
-      </Portal>
+
+        <Portal>
+          <h1>This content is rendered in a portal (another DOM tree)</h1>
+          <p>
+            Because of the portal, it can appear in a different DOM tree from the main one (by
+            default a new element inside the body), even though it is part of the same React tree.
+          </p>
+        </Portal>
+      </div>
+
+      <br />
+      <CustomPortalContainer />
+
+      <br />
+      <ConditionalPortal />
     </div>
   );
 }