# 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-ripple/frame' ``` ## 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** **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 |