Fix invalid hook error.

Author: Kent Walters

README.md

@@ -36,6 +36,10 @@ export default App;
 
 `<Retool>` will accept an optional `data` object, which is made available to the embedded application. When an embedded Retool application runs a Parent Window Query, `<Retool>` will check if `data` contains a key matching the Parent Window Query's selector, and if so, return that value to the query.
 
+`<Retool>` will accept optional `height` and `width` props which will be used for the dimensions of the embedded window.
+
+`<Retool>` will accept an optional `onData` callback that will be called with the data of an event that is sent from the embedded Retool app. These events can be sent from a JavaScript query inside of Retool by using the `parent.postMessage()` syntax.
+
 ### Example
 
 Running `yarn start` will start an application with a basic Retool app embeded.

package.json

@@ -24,7 +24,7 @@
       ]
     ]
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/App.js

@@ -1,5 +1,5 @@
 import Retool from "./components/Retool";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 const App = () => {
   const sample = {
@@ -8,21 +8,6 @@ const App = () => {
     input: "",
   };
 
-  useEffect(() => {
-    const handler = (event) => {
-      if (
-        event.origin === "https://support.retool.com" &&
-        event.data?.type !== "PARENT_WINDOW_QUERY"
-      ) {
-        setRetoolData(event.data);
-      }
-    };
-
-    window.addEventListener("message", handler);
-
-    return () => window.removeEventListener("message", handler);
-  }, []);
-
   const [retoolData, setRetoolData] = useState("");
   const [data, setData] = useState(sample);
   return (
@@ -50,8 +35,9 @@ const App = () => {
         data={data}
         height="700px"
         width="1000px"
+        onData={setRetoolData}
       ></Retool>
-      <h1> {retoolData} </h1>
+      <h1> {JSON.stringify(retoolData)} </h1>
     </div>
   );
 };

src/components/Retool.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-const Retool = ({ data, url, height, width }) => {
+const Retool = ({ data, url, height, width, onData }) => {
   const embeddedIframe = useRef(null);
   const [elementWatchers, setElementWatchers] = useState({});
 
@@ -25,6 +25,15 @@ const Retool = ({ data, url, height, width }) => {
     /* Handle events - if PWQ then create/replace watchers -> return result */
     const handler = (event) => {
       if (!embeddedIframe?.current?.contentWindow) return;
+      
+      if (
+        event.origin === new URL(url).origin &&
+        event.data?.type !== "PARENT_WINDOW_QUERY" &&
+        event.data?.type !== 'intercom-snippet__ready'
+      ) {
+        onData(event.data);
+      }
+      
       if (event.data.type === "PARENT_WINDOW_QUERY") {
         createOrReplaceWatcher(
           event.data.selector,