feat: add useFloatingPortalNode hook (floating-ui#1672)

Author: mihkeleidast

packages/react-dom-interactions/src/FloatingPortal.tsx

@@ -4,24 +4,17 @@ import useLayoutEffect from 'use-isomorphic-layout-effect';
 
 const DEFAULT_ID = 'floating-ui-root';
 
-/**
- * Portals your floating element outside of the main app node.
- * @see https://floating-ui.com/docs/FloatingPortal
- */
-export const FloatingPortal = ({
-  children,
+export const useFloatingPortalNode = ({
   id = DEFAULT_ID,
-  root = null,
+  enabled = true,
 }: {
-  children?: React.ReactNode;
   id?: string;
-  root?: HTMLElement | null;
-}): React.ReactPortal | null => {
-  const [mounted, setMounted] = React.useState(false);
+  enabled?: boolean;
+} = {}) => {
   const portalRef = React.useRef<HTMLElement | null>(null);
 
   useLayoutEffect(() => {
-    if (root) {
+    if (!enabled) {
       return;
     }
 
@@ -37,16 +30,40 @@ export const FloatingPortal = ({
     if (!document.body.contains(portalRef.current)) {
       document.body.appendChild(portalRef.current);
     }
+  }, [id, enabled]);
+
+  return portalRef.current;
+};
 
+/**
+ * Portals your floating element outside of the main app node.
+ * @see https://floating-ui.com/docs/FloatingPortal
+ */
+export const FloatingPortal = ({
+  children,
+  id = DEFAULT_ID,
+  root = null,
+}: {
+  children?: React.ReactNode;
+  id?: string;
+  root?: HTMLElement | null;
+}): React.ReactPortal | null => {
+  const [mounted, setMounted] = React.useState(false);
+  const portalNode = useFloatingPortalNode({id, enabled: !root});
+
+  useLayoutEffect(() => {
+    if (root) {
+      return;
+    }
     setMounted(true);
-  }, [id, root]);
+  }, [root]);
 
   if (root) {
     return createPortal(children, root);
   }
 
-  if (mounted && portalRef.current) {
-    return createPortal(children, portalRef.current);
+  if (mounted && portalNode) {
+    return createPortal(children, portalNode);
   }
 
   return null;

packages/react-dom-interactions/src/index.ts

@@ -99,7 +99,7 @@ export function useFloating<RT extends ReferenceType = ReferenceType>({
 export * from '@floating-ui/react-dom';
 export {useInteractions} from './useInteractions';
 export {safePolygon} from './safePolygon';
-export {FloatingPortal} from './FloatingPortal';
+export {FloatingPortal, useFloatingPortalNode} from './FloatingPortal';
 export {FloatingOverlay} from './FloatingOverlay';
 export {FloatingFocusManager} from './FloatingFocusManager';
 export {

website/pages/docs/FloatingPortal.mdx

@@ -49,3 +49,24 @@ supports shadow roots.
   {open && <div>Tooltip</div>}
 </FloatingPortal>
 ```
+
+## useFloatingPortalNode
+
+Exposes the portal container node for custom use in other
+components. The hook injects the node, if it does not yet exist
+in the DOM.
+
+```js
+function App() {
+  const portalNode = useFloatingPortalNode({
+    id: 'custom-root-id', // 'floating-ui-root' by default
+    enabled: false, // true by default
+  });
+
+  if (portalNode) {
+    return ReactDOM.createPortal(<div></div>, portalNode);
+  }
+
+  return null;
+}
+```