add styling prop to forward iframe styles

Author: BenjamynBaker

README.md

@@ -42,6 +42,8 @@ export default App;
 
 `<Retool>` also accepts optional `allow` and `sandbox` parameters to configure permissions of the iframe used to embed the Retool app. `allow-scripts` and `allow-same-origin` are required in order to run Retool, so if `sandbox` is specified, `allow-scripts` and `allow-same-origin` will always be appended to ensure the Retool app works.
 
+`<Retool>` will accept an optional `styling` prop object that can be used to pass in styles to the iframe component.
+
 ### Example
 
 Running `yarn start` will start an application with a basic Retool app embeded.

src/App.js

@@ -2,6 +2,10 @@ import Retool from "./components/Retool";
 import { useState } from "react";
 
 const App = () => {
+  const iframeStyle = {
+    border: "2px solid red",
+  };
+
   const sample = {
     example1: "",
     example2: false,
@@ -36,6 +40,7 @@ const App = () => {
         height="700px"
         width="1000px"
         onData={setRetoolData}
+        styling={iframeStyle}
       ></Retool>
       <h1> {JSON.stringify(retoolData)} </h1>
     </div>

src/components/Retool.js

@@ -1,8 +1,17 @@
 import { useEffect, useRef, useState } from "react";
 
-const MINIMUM_SANDBOX_PERMISSIONS = 'allow-scripts allow-same-origin'
-
-const Retool = ({ data, url, height, width, onData, sandbox, allow }) => {
+const MINIMUM_SANDBOX_PERMISSIONS = "allow-scripts allow-same-origin";
+
+const Retool = ({
+  data,
+  url,
+  height,
+  width,
+  onData,
+  sandbox,
+  allow,
+  styling,
+}) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
@@ -92,7 +101,12 @@ const Retool = ({ data, url, height, width, onData, sandbox, allow }) => {
     }
   };
 
-  const sandboxAttrib = typeof sandbox === 'string' ? `${MINIMUM_SANDBOX_PERMISSIONS} ${sandbox}` : sandbox === true ? MINIMUM_SANDBOX_PERMISSIONS : sandbox
+  const sandboxAttrib =
+    typeof sandbox === "string"
+      ? `${MINIMUM_SANDBOX_PERMISSIONS} ${sandbox}`
+      : sandbox === true
+      ? MINIMUM_SANDBOX_PERMISSIONS
+      : sandbox;
 
   return (
     <iframe
@@ -104,6 +118,7 @@ const Retool = ({ data, url, height, width, onData, sandbox, allow }) => {
       src={url}
       ref={embeddedIframe}
       title="retool"
+      style={styling}
     />
   );
 };