allow defined heights to be passed in

Author: BenjamynBaker

src/App.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
 
 const App = () => {
   const sample = {
-    example: "value",
+    name: "value",
     example2: 19999,
     example3: { hello: "world" },
     input: "",
@@ -24,7 +24,7 @@ const App = () => {
   const [retoolData, setRetoolData] = useState("");
   const [data, setData] = useState(sample);
   return (
-    <div style={{ height: "500px" }}>
+    <div>
       <button
         onClick={() => {
           setData({ ...data, example2: "new value" });
@@ -41,8 +41,10 @@ const App = () => {
       <h1> {retoolData} </h1>
       <p id="hello"> {JSON.stringify(data)} </p>
       <Retool
-        url="https://support.retool.com/apps/Ben/parent%20window%20query123"
+        url="https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a"
         data={data}
+        height="500px"
+        width="500px"
       ></Retool>
     </div>
   );

src/components/Retool.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 
-const Retool = ({ data, url }) => {
+const Retool = ({ data, url, height, width }) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
@@ -34,7 +34,6 @@ const Retool = ({ data, url }) => {
 
     window.addEventListener("message", handler);
 
-    // clean up
     return () => window.removeEventListener("message", handler);
   }, []);
 
@@ -74,8 +73,8 @@ const Retool = ({ data, url }) => {
 
   return (
     <iframe
-      height="100%"
-      width="100%"
+      height={height ?? "100%"}
+      width={width ?? "100%"}
       frameBorder="none"
       src={url}
       ref={embeddedIframe}