# Iframe portal

Allows you to write jsx to render inside an iframe.
WARNING: it's possible to escape the iframe and execute code in the parent window

```js
const [counter, setCounter] = React.useState(0);
<SilkeBox column>
  <SilkeIframePortal autoResize style={{ border: '2px solid white' }}>
    <SilkeIframeCssLink href="https://cdn.vev.design/fontawesome/7.0.0-v3/css/all.min.css" />
    <SilkeIframeCssLink href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD,XOPQ,XTRA,YTAS,YTFI,YTLC,YTUC@8..144,25..151,100..1000,-200..150,27..175,323..603,649..854,710,416..570,528..760&display=swap" />
    <h1>
      <i class="fa-regular fa-hand-sparkles"></i>
    </h1>
    <style>{"body{color:white;font-family:'Source Code Pro';}"}</style>
    <h1>This header is rendered inside an iframe</h1>
    <h1>Counter inside iframe: {counter}</h1>
    <SilkeButton label="Increment counter inside iframe" onClick={() => setCounter((c) => c + 1)} />
    <p>Styles will not be synced into the iframe, so silke components will have no style</p>
    <SilkeIframeScript>{`console.log("hello from iframe")`}</SilkeIframeScript>
  </SilkeIframePortal>
  <h1>Counter outside iframe: {counter}</h1>
  <SilkeButton label="Increment counter outside iframe" onClick={() => setCounter((c) => c + 1)} />
</SilkeBox>;
```