iframe example - use an onLoad callback instead of the ref (ianstormt…

…aylor#4758) * use an onLoad callback instead of the ref * expect body to not be null on the iframe test * remove onLoad prop
DougReeder · Jan 10, 2022 · e3a325f · e3a325f
1 parent 8daa77e
commit e3a325f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/cypress/integration/examples/iframe.ts b/cypress/integration/examples/iframe.ts
@@ -12,6 +12,7 @@ const getIframeBody = () => {
       .its('body')
       // automatically retries until body is loaded
       .should('not.be.undefined')
+      .should('not.be.null')
       .then(cy.wrap)
   )
 }

diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
@@ -105,14 +105,13 @@ const MarkButton = ({ format, icon }) => {
 }
 
 const IFrame = ({ children, ...props }) => {
-  const [contentRef, setContentRef] = useState(null)
-  const mountNode =
-    contentRef &&
-    contentRef.contentWindow &&
-    contentRef.contentWindow.document.body
+  const [iframeBody, setIframeBody] = useState(null)
+  const handleLoad = e => {
+    setIframeBody(e.target.contentDocument.body)
+  }
   return (
-    <iframe {...props} ref={setContentRef}>
-      {mountNode && createPortal(React.Children.only(children), mountNode)}
+    <iframe srcDoc={`<!DOCTYPE html>`} {...props} onLoad={handleLoad}>
+      {iframeBody && createPortal(children, iframeBody)}
     </iframe>
   )
 }