# code/editor/DiffView (zidane-ui/code/editor)

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

## Components

### `DiffScroller`

Component.

pierre's virtualizer as the scroll box of a list of diffs: every [`DiffView`](https://zidane.si/docs/reference/ui-code-editor-diff-view.md#DiffView) inside renders only its lines
near the viewport, so a large change set opens and scrolls in frames.

```ts
function DiffScroller(props: DiffScrollerProps): Element
```

**Parameters**

- `props` (`DiffScrollerProps`): The scroll box's and content box's classes, and the diffs.

**Returns** `Element`

**Props**

- `children?` (`ReactNode`): The diffs.
- `className?` (`string`): Classes on the scroll box.
- `contentClassName?` (`string`): Classes on the content box inside it.

Source: [ui/src/code/editor/DiffView.tsx:191](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiffView.tsx#L191)

### `DiffView`

Component.

One file's diff, rendered by pierre in the editor environment's theme, with optional line selection and
annotation rows.

```ts
function DiffView<A>(props: DiffViewProps<A>): Element
```

**Type parameters**

- `A`

**Parameters**

- `props` (`DiffViewProps<A>`): The patch or parsed diff, the style, and the selection and annotation hooks.

**Returns** `Element`

**Props**

- `annotations?` (`readonly DiffLineAnnotation<A>[]`): Rows under lines (review comments).
- `className?` (`string`): Classes on pierre's host element.
- `diffStyle?` (`DiffStyle`): Unified or split. Default unified.
- `fileDiff?` (`FileDiffMetadata`): An already-parsed file diff (wins over `patch`).
- `hideHeader?` (`boolean`): Hide the per-file header (when the caller renders its own).
- `onContextMenu?` (`(e: MouseEvent<HTMLDivElement>) => void`): Right-click anywhere in the view (the host element, so shadow paths are intact).
- `onGutterAction?` (`(range: SelectedLineRange) => void`): Gutter "+" on hover / at the selection end; called with the range it covers.
- `onSelectionEnd?` (`(range: SelectedLineRange | null) => void`): A line range was selected (enables selection).
- `patch?` (`string`): Unified patch for exactly one file.
- `renderAnnotation?` (`(annotation: DiffLineAnnotation<A>) => ReactNode`): Renders one annotation row.
- `selectedLines?` (`SelectedLineRange | null`): The selected line range (controlled).
- `wrap?` (`boolean`): Wrap long lines instead of scrolling.

Source: [ui/src/code/editor/DiffView.tsx:173](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiffView.tsx#L173)

## Interfaces

### `DiffScrollerProps`

Interface.

Props for [`DiffScroller`](https://zidane.si/docs/reference/ui-code-editor-diff-view.md#DiffScroller).

```ts
interface DiffScrollerProps
```

**Properties**

- `children?` (`ReactNode`): The diffs.
- `className?` (`string`): Classes on the scroll box.
- `contentClassName?` (`string`): Classes on the content box inside it.

Source: [ui/src/code/editor/DiffView.tsx:176](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiffView.tsx#L176)

### `DiffViewProps`

Interface.

Props for [`DiffView`](https://zidane.si/docs/reference/ui-code-editor-diff-view.md#DiffView).

```ts
interface DiffViewProps<A = unknown>
```

**Type parameters**

- `A` (default `unknown`)

**Properties**

- `annotations?` (`readonly DiffLineAnnotation<A>[]`): Rows under lines (review comments).
- `className?` (`string`): Classes on pierre's host element.
- `diffStyle?` (`DiffStyle`): Unified or split. Default unified.
- `fileDiff?` (`FileDiffMetadata`): An already-parsed file diff (wins over `patch`).
- `hideHeader?` (`boolean`): Hide the per-file header (when the caller renders its own).
- `onContextMenu?` (`(e: MouseEvent<HTMLDivElement>) => void`): Right-click anywhere in the view (the host element, so shadow paths are intact).
- `onGutterAction?` (`(range: SelectedLineRange) => void`): Gutter "+" on hover / at the selection end; called with the range it covers.
- `onSelectionEnd?` (`(range: SelectedLineRange | null) => void`): A line range was selected (enables selection).
- `patch?` (`string`): Unified patch for exactly one file.
- `renderAnnotation?` (`(annotation: DiffLineAnnotation<A>) => ReactNode`): Renders one annotation row.
- `selectedLines?` (`SelectedLineRange | null`): The selected line range (controlled).
- `wrap?` (`boolean`): Wrap long lines instead of scrolling.

Source: [ui/src/code/editor/DiffView.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiffView.tsx#L34)

## Types

### `DiffStyle`

Type.

One column with removals above additions, or two side by side.

```ts
type DiffStyle = 'unified' | 'split'
```

Source: [ui/src/code/editor/DiffView.tsx:28](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiffView.tsx#L28)

## Re-exports

These names are documented on the entry point that owns them.

- @pierre/diffs: `DiffLineAnnotation`, `FileDiffMetadata`, `LineAnnotation`, `SelectedLineRange`