Utilities
Frame

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 head prop 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 found

Injecting Script

Using the onMount prop, you can inject a script into the iframe.

Example not found

Custom src doc

Use the srcDoc prop to specify the HTML content of the page to use in the iframe.

Example not found

API Reference

Props

Frame

PropDefaultType
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
() => void

Callback function to be executed when the frame is mounted

onUnmount
() => void

Callback function to be executed when the frame is unmounted