diff --git a/website/package.json b/website/package.json index b7ba2d33a..f144077c3 100644 --- a/website/package.json +++ b/website/package.json @@ -23,8 +23,7 @@ "file-loader": "^6.2.0", "prism-react-renderer": "^1.2.1", "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-frame-component": "^5.2.1", + "react-dom": "^17.0.2", "url-loader": "^4.1.1" }, "devDependencies": { diff --git a/website/src/components/AutoResizeFrame.tsx b/website/src/components/AutoResizeFrame.tsx new file mode 100644 index 000000000..d326afbed --- /dev/null +++ b/website/src/components/AutoResizeFrame.tsx @@ -0,0 +1,32 @@ +import React, { useRef, useState } from "react"; +import { FunctionComponent } from "react"; + +const AutoResizeFrame: FunctionComponent<{ srcDoc: string }> = ({ srcDoc }) => { + const ref = useRef(); + const [height, setHeight] = useState("100px"); + const onLoad = () => { + setHeight(ref?.current?.contentWindow.document.body.scrollHeight + "px"); + }; + + const id = "iframe_" + Math.random().toString(36).slice(2, 9); + + return ( + + ); +}; + +export default AutoResizeFrame; diff --git a/website/src/components/HtmlCode.tsx b/website/src/components/HtmlCode.tsx index b531e9aa0..57a187ee5 100644 --- a/website/src/components/HtmlCode.tsx +++ b/website/src/components/HtmlCode.tsx @@ -1,41 +1,17 @@ -import React, { Children, FunctionComponent, ReactNode } from "react"; -import { createRef, RefObject, useEffect, useState } from "react"; -import Frame from "react-frame-component"; +import React, { FunctionComponent, ReactNode } from "react"; +import { renderToStaticMarkup } from "react-dom/server"; +import AutoResizeFrame from "./AutoResizeFrame"; interface IProps { children: ReactNode; bootstrapVersion: string; } -interface IFrame { - node: HTMLIFrameElement; -} - const HtmlCode: FunctionComponent = ({ children, bootstrapVersion, }) => { - const [height, setHeight] = useState(100); - const iframeRef: RefObject