Import
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 '@cerberus/react'Usage
Basic
Wrap your component in the Frame component to render it in an iframe.
Loading example...
Injecting Script
Using the onMount prop, you can inject a script into the iframe.
Loading example...
Custom src doc
Use the srcDoc prop to specify the HTML content of the page to use in the iframe.
Loading example...
API Reference
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
head | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | false | undefined | Additional content to be inserted into the frame's <head> |
onMount | () => void | false | undefined | Callback function to be executed when the frame is mounted |
onUnmount | () => void | false | undefined | Callback function to be executed when the frame is unmounted |