import pym , { ParentSettings } from "pym.js" ; import React , { FunctionComponent , useEffect , useMemo } from "react" ; import { v1 as uuid } from "uuid" ; import { Spinner } from "coral-ui/components/v2" ; interface Props { id ? : string ; src : string ; sandbox ? : boolean ; } const Frame = ( { id , src , sandbox } ) => { const containerID = useMemo ( ( ) => ( id ? `frame-id-${ id }-${ uuid ( ) }` : `frame-uuid-${ uuid ( ) }` ) , [ id ] ) ; useEffect ( ( ) => { const config = { optionalparams : false , } ; if ( sandbox ) { config . sandbox = "allow-same-origin allow-scripts" ; } const parent = new pym . Parent ( containerID , src , config ) ; return ( ) => { parent . remove ( ) ; } ; } , [ containerID , sandbox , src ] ) ; return ( < div id = { containerID } > { } < Spinner / > < /div>); } ; export default Frame ;