# Frame (SOLID)



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

```tsx
import { Frame } from '@ark-ui/solid/frame'

export const Basic = () => {
  return (
    <Frame
      title="Custom Frame"
      style={{ border: '1px solid #ccc', width: '100%', height: 'var(--height)' }}
      head={<style>{'body { background-color: #f0f0f0; }'}</style>}
    >
      <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>
  )
}
```

### Injecting Script

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

```tsx
import { Frame } from '@ark-ui/solid/frame'

export const Script = () => {
  let ref: HTMLIFrameElement | undefined
  return (
    <Frame
      ref={ref}
      title="Custom Frame"
      onMount={() => {
        const doc = ref?.contentDocument
        if (!doc) return
        const script = doc.createElement('script')
        script.innerHTML = 'console.log("Hello from inside the frame!")'
        doc.body.appendChild(script)
      }}
      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>
  )
}
```

### Custom src doc

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

```tsx
import { Frame } from '@ark-ui/solid/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></div></body></html>`

export const SrcDoc = () => {
  return (
    <Frame title="Custom Frame" style={{ border: '1px solid #ccc', width: '100%' }} srcdoc={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>
      <p>The frame has custom initial content, including Font Awesome and Open Sans font.</p>
    </Frame>
  )
}
```

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