# Frame URL: https://ark-ui.com/docs/utilities/frame Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/frame.mdx Used to render a component in an iframe --- ## Usage The `Frame` component is used to render a component in an iframe. - Tracks the size of the content and exposes them via css variables. - Support for `head` prop to inject scripts and styles. - Support for mount and unmount callbacks. ```jsx import { Frame } from '@ark-ui/react' ``` ## Examples ### Basic Wrap your component in the `Frame` component to render it in an iframe. ### Injecting Script Using the `onMount` prop, you can inject a script into the iframe. ### Custom src doc Use the `srcDoc` prop to specify the HTML content of the page to use in the iframe. ## API Reference ### Props **Component API Reference** #### React **Frame Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `head` | `string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise<...>` | No | Additional content to be inserted into the frame's | | `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted | | `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted | #### Solid **Frame Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `head` | `number | boolean | Node | ArrayElement | (string & {})` | No | Additional content to be inserted into the frame's | | `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted | | `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted | #### Vue **Frame Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `head` | `VNode | VNode[]` | No | | | `srcDoc` | `string` | No | | #### Svelte **Frame Props:** | Prop | Type | Required | Description | |------|------|----------|-------------| | `head` | `Snippet<[]>` | No | Additional content to be inserted into the frame's | | `onMount` | `() => void` | No | Callback function to be executed when the frame is mounted | | `onUnmount` | `() => void` | No | Callback function to be executed when the frame is unmounted | | `ref` | `HTMLIFrameElement` | No | The bindable ref of the iframe | | `srcdoc` | `string` | No | The source document to be displayed in the frame |