# Frame (VUE)



## 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-ui/react'
```

## Examples

### Basic

Wrap your component in the `Frame` component to render it in an iframe.

```vue
<script lang="ts" setup>
import { Frame } from '@ark-ui/vue/frame'
</script>

<template>
  <Frame title="Custom Frame" :style="{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }">
    <div style="padding: 40px">
      <h1>Hello from inside the frame!</h1>
      <p>This content is rendered within our custom frame component using a Portal.</p>
    </div>
    <template #head>
      <component is="style">body { background-color: #f0f0f0; }</component>
    </template>
  </Frame>
</template>
```

### Injecting Script

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

```vue
<script setup lang="ts">
// biome-ignore lint/style/useImportType: intentional
import { Frame } from '@ark-ui/vue/frame'
import { ref } from 'vue'

const frameRef = ref<InstanceType<typeof Frame> | null>(null)

const onMount = () => {
  const doc = frameRef.value?.frameRef?.contentDocument
  if (!doc) return
  const script = doc.createElement('script')
  script.innerHTML = 'console.log("Hello from inside the frame!")'
  doc.body.appendChild(script)
}
</script>

<template>
  <Frame
    ref="frameRef"
    title="Custom Frame"
    @mount="onMount"
    :style="{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }"
  >
    <div style="padding: 40px">
      <h1>Hello from inside the frame!</h1>
      <p>This content is rendered within our custom frame component using a Portal.</p>
    </div>
  </Frame>
</template>
```

### Custom src doc

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

```vue
<script lang="ts" setup>
import { Frame } from '@ark-ui/vue/frame'

const srcDoc = `<html><head>
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<base target=_blank>
</head><body style='overflow: hidden'><div class='frame-root'></div></body></html>`
</script>

<template>
  <Frame title="Custom Frame" :style="{ border: '1px solid #ccc', width: '100%' }" :src-doc="srcDoc">
    <h1 style="font-family: 'Open Sans', sans-serif">Hello from inside the frame!</h1>
    <p>This content is rendered within our custom frame component using a Portal.</p>
  </Frame>
</template>
```

## API Reference

### Props

**Component API Reference**

#### React

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | Additional content to be inserted into the frame's <head> |
| `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 |


#### Solid

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `number | boolean | Node | ArrayElement | (string & {})` | No | Additional content to be inserted into the frame's <head> |
| `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 |


#### Vue

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `VNode<RendererNode, RendererElement, { [key: string]: any; }> | VNode<RendererNode, RendererElement, { ...; }>[]` | No |  |
| `srcDoc` | `string` | No |  |


#### Svelte

**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `head` | `Snippet<[]>` | No | Additional content to be inserted into the frame's <head> |
| `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 |
| `ref` | `HTMLIFrameElement` | No | The bindable ref of the iframe |
| `srcdoc` | `string` | No | The source document to be displayed in the frame |