# Diff
Package: @mantine/code-highlight
Import: import { Diff } from '@mantine/code-highlight';
Description: Highlight differences between two strings

## Usage

`Diff` component highlights differences between two strings. By default, it uses
word-level diff granularity and unified display mode:

```tsx
// Demo.tsx
import { Diff } from '@mantine/code-highlight';
import { currentCode, previousCode } from './data';

function Demo() {
  return <Diff previousValue={previousCode} currentValue={currentCode} />;
}

// data.ts
export const previousCode = \`import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}\
```


## Split mode

Set `mode="split"` to display the diff in a side-by-side layout:

```tsx
// Demo.tsx
import { Diff } from '@mantine/code-highlight';
import { currentCode, previousCode } from './data';

function Demo() {
  return <Diff previousValue={previousCode} currentValue={currentCode} mode="split" />;
}

// data.ts
export const previousCode = \`import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}\
```


## Diff method

Use the `diffMethod` prop to change how changed lines are highlighted: by characters,
by words (default) or by whole lines:

```tsx
import { Stack, Text } from '@mantine/core';
import { Diff } from '@mantine/code-highlight';

const previousValue = 'The quick brown fox jumps over the lazy dog.';
const currentValue = 'The quick red cat leaps over the lazy dog.';

function Demo() {
  return (
    <Stack>
      <div>
        <Text fw={500} mb={4}>Characters</Text>
        <Diff previousValue={previousValue} currentValue={currentValue} diffMethod="chars" />
      </div>
      <div>
        <Text fw={500} mb={4}>Words (default)</Text>
        <Diff previousValue={previousValue} currentValue={currentValue} diffMethod="words" />
      </div>
      <div>
        <Text fw={500} mb={4}>Lines</Text>
        <Diff previousValue={previousValue} currentValue={currentValue} diffMethod="lines" />
      </div>
    </Stack>
  );
}
```


## Context lines

Set `contextLines` prop to control how many unchanged lines are displayed around changes.
Other unchanged lines are collapsed and can be expanded with the expand button:

```tsx
import { Diff } from '@mantine/code-highlight';

const previousValue = `line 1
line 2
line 3
line 4
line 5
old line 6
line 7
line 8
line 9
line 10`;

const currentValue = `line 1
line 2
line 3
line 4
line 5
new line 6
line 7
line 8
line 9
line 10`;

function Demo() {
  return <Diff previousValue={previousValue} currentValue={currentValue} contextLines={2} />;
}
```


Use `expandLabel` prop to change the expand button label:

```tsx
<Diff
  previousValue={previousValue}
  currentValue={currentValue}
  contextLines={2}
  expandLabel={(hiddenCount) => `${hiddenCount} more`}
/>
```

## Custom colors

Use `addColor` and `removeColor` props to change the highlight colors:

```tsx
import { Diff } from '@mantine/code-highlight';

function Demo() {
  return (
    <Diff
      previousValue="The quick brown fox"
      currentValue="The quick red fox"
      addColor="blue"
      removeColor="orange"
    />
  );
}
```


## Configurator

```tsx
// Demo.tsx
import { Diff } from '@mantine/code-highlight';
import { currentCode, previousCode } from './data';

function Demo() {
  return <Diff previousValue={previousCode} currentValue={currentCode} mode="unified" diffMethod="words" withLineNumbers={true} />;
}

// data.ts
export const previousCode = \`import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}\
```



#### Props

**Diff props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| addColor | MantineColor | - | Key of `theme.colors` or any valid CSS color for added content, default is `'teal'` |
| contextLines | number | - | Number of unchanged lines shown around changes, default is `Infinity` |
| currentValue | string | required | The modified text |
| diffMethod | "words" \| "chars" \| "lines" | - | Diff granularity for inline highlights, default is `'words'` |
| expandLabel | (hiddenCount: number) => string | - | Function to generate expand button label, default is `(hiddenCount) => \`Show ${hiddenCount} hidden lines\`` (`line` when `hiddenCount` is 1) |
| mode | "split" \| "unified" | - | Display mode, default is `'unified'` |
| previousValue | string | required | The original text |
| removeColor | MantineColor | - | Key of `theme.colors` or any valid CSS color for removed content, default is `'red'` |
| withLineNumbers | boolean | - | Determines whether to show line number gutters, default is `true` |


#### Styles API

Diff component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**Diff selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Diff-root | Root element |
| table | .mantine-Diff-table | Table element |
| row | .mantine-Diff-row | Table row |
| lineNumber | .mantine-Diff-lineNumber | Line number cell |
| content | .mantine-Diff-content | Content cell |
| addedLine | .mantine-Diff-addedLine | Added line |
| removedLine | .mantine-Diff-removedLine | Removed line |
| unchangedLine | .mantine-Diff-unchangedLine | Unchanged line |
| addedHighlight | .mantine-Diff-addedHighlight | Inline highlight for added text |
| removedHighlight | .mantine-Diff-removedHighlight | Inline highlight for removed text |
| expandControl | .mantine-Diff-expandControl | Expand control for collapsed context sections |
| splitDivider | .mantine-Diff-splitDivider | Divider between left and right panels in split mode |
| changeMarker | .mantine-Diff-changeMarker | Visually hidden `+`/`-` marker at the start of added and removed lines |

**Diff CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --diff-add-color | Controls background color of added lines |
| root | --diff-remove-color | Controls background color of removed lines |
| root | --diff-add-highlight-color | Controls background color of inline added highlights |
| root | --diff-remove-highlight-color | Controls background color of inline removed highlights |

**Diff data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root | data-split | `mode="split"` is set | - |