# components/CodeFrame (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/CodeFrame.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/CodeFrame.tsx).

## Components

### `CodeFrame`

Component.

Renders code in its surface with a copy button revealed on hover. Without `caption` it
is the bare code panel; with `caption` it adds a tray with a header. The ref goes to the
outer element.

```ts
const CodeFrame: ForwardRefExoticComponent<CodeFrameProps & RefAttributes<HTMLDivElement>>
```

**Props**

- `actions?` (`(buttonClass: string) => ReactNode`): Extra controls before Wrap and Copy (a diagram's source toggle). Receives the class the frame's own
  buttons wear (revealed on hover, sized and backed for this form): put it on each control.
- `caption?` (`ReactNode`): Header content. When set, the code sits in a tray under a header with the icon, this
  caption and the copy button, and a string caption also names the scroll group. Omit it
  for the bare code panel.
- `children` (`ReactNode`): The code to show, such as highlighted HTML or a `<pre>`, with no background of its own: the frame is its surface.
- `className?` (`string`): Extra classes on the outer element.
- `code` (`string`): The plain text the copy button writes.
- `copyLabel?` (`string`): Accessible name of the copy button. Defaults to the `copyCode` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `icon?` (`string`): Icon class before the caption.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `wrap?` (`boolean`): Start with long lines wrapped. Defaults to the [`CodeWrapProvider`](https://zidane.si/docs/reference/ui-components-code-frame.md#CodeWrapProvider) value (off without one).

Source: [ui/src/components/CodeFrame.tsx:152](https://github.com/Tahul/zidane/blob/main/ui/src/components/CodeFrame.tsx#L152)

### `CodeWrapProvider`

Component.

Sets whether code frames below start with long lines wrapped (each frame's toggle still flips its own).

```ts
function CodeWrapProvider(props: CodeWrapProviderProps): Element
```

**Parameters**

- `props` (`CodeWrapProviderProps`): `wrap`: the default; `children`: the subtree it applies to.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The subtree it applies to.
- `wrap` (`boolean`): Whether frames start wrapped.

Source: [ui/src/components/CodeFrame.tsx:61](https://github.com/Tahul/zidane/blob/main/ui/src/components/CodeFrame.tsx#L61)

## Interfaces

### `CodeFrameProps`

Interface.

Props of [`CodeFrame`](https://zidane.si/docs/reference/ui-components-code-frame.md#CodeFrame).

```ts
interface CodeFrameProps
```

**Properties**

- `actions?` (`(buttonClass: string) => ReactNode`): Extra controls before Wrap and Copy (a diagram's source toggle). Receives the class the frame's own
  buttons wear (revealed on hover, sized and backed for this form): put it on each control.
- `caption?` (`ReactNode`): Header content. When set, the code sits in a tray under a header with the icon, this
  caption and the copy button, and a string caption also names the scroll group. Omit it
  for the bare code panel.
- `children` (`ReactNode`): The code to show, such as highlighted HTML or a `<pre>`, with no background of its own: the frame is its surface.
- `className?` (`string`): Extra classes on the outer element.
- `code` (`string`): The plain text the copy button writes.
- `copyLabel?` (`string`): Accessible name of the copy button. Defaults to the `copyCode` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `icon?` (`string`): Icon class before the caption.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `wrap?` (`boolean`): Start with long lines wrapped. Defaults to the [`CodeWrapProvider`](https://zidane.si/docs/reference/ui-components-code-frame.md#CodeWrapProvider) value (off without one).

Source: [ui/src/components/CodeFrame.tsx:66](https://github.com/Tahul/zidane/blob/main/ui/src/components/CodeFrame.tsx#L66)

### `CodeWrapProviderProps`

Interface.

Props for [`CodeWrapProvider`](https://zidane.si/docs/reference/ui-components-code-frame.md#CodeWrapProvider).

```ts
interface CodeWrapProviderProps
```

**Properties**

- `children` (`ReactNode`): The subtree it applies to.
- `wrap` (`boolean`): Whether frames start wrapped.

Source: [ui/src/components/CodeFrame.tsx:49](https://github.com/Tahul/zidane/blob/main/ui/src/components/CodeFrame.tsx#L49)