Frame
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
headprop to inject scripts and styles. - Support for mount and unmount callbacks.
import { Frame } from '@ark-ui/react'
Examples
Basic
Wrap your component in the Frame component to render it in an iframe.
Example not foundExample not foundExample not foundExample not foundInjecting Script
Using the onMount prop, you can inject a script into the iframe.
Example not foundExample not foundExample not foundExample not foundCustom src doc
Use the srcDoc prop to specify the HTML content of the page to use in the iframe.
Example not foundExample not foundExample not foundExample not foundAPI Reference
Props
Frame
| Prop | Default | Type |
|---|---|---|
head | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>Additional content to be inserted into the frame's <head> | |
onMount | () => voidCallback function to be executed when the frame is mounted | |
onUnmount | () => voidCallback function to be executed when the frame is unmounted |