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.
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
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 |