Modifying the HTML page structures for some React functionalities like portals

[billstark001]

Currently I do this:

diff --git a/node_modules/vike-react/dist/integration/onRenderHtml.js b/node_modules/vike-react/dist/integration/onRenderHtml.js
index fed2b07..971e302 100644
--- a/node_modules/vike-react/dist/integration/onRenderHtml.js
+++ b/node_modules/vike-react/dist/integration/onRenderHtml.js
@@ -27,6 +27,7 @@ const onRenderHtml = async (pageContext) => {
       <body${dangerouslySkipEscape(bodyAttributesString)}>
         ${bodyHtmlBegin}
         <div id="root">${pageHtml}</div>
+        <div id="portal-root"></div>
         ${bodyHtmlEnd}
       </body>
     </html>`;

by patch-package in order to inject tags other than the root node to the document. Is there any way more elegant and/or recommended to do this?

[brillout]

How about https://vike.dev/bodyHtmlEnd? Maybe we should improve its documentation to mention the portal use case (so that users find it when searching for "portal").

[billstark001]

This works for me, thanks. And yes, showing more cases in the documentation like portal anchor is definitely helpful for others.

[brillout]

Done: https://vike.dev/bodyHtmlEnd#react. Let me know if you believe there is anything else that could be improved.