Diff

Highlight differences between two strings

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/code-highlight

License

MIT

Usage

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

1		- import { useState } from 'react';
	1	+ import { useReducer } from 'react';
2	2
3	3	function Counter() {
4		- const [count, setCount] = useState(0);
	4	+ const [count, dispatch] = useReducer(reducer, 0);
5	5	return (
6		- <button onClick={() => setCount(count + 1)}>
	6	+ <button onClick={() => dispatch({ type: 'increment' })}>
7	7	Count: {count}
8	8	</button>
9	9	);
10	10	}

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

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

Split mode

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

1	- import { useState } from 'react';	1	+ import { useReducer } from 'react';
2		2
3	function Counter() {	3	function Counter() {
4	- const [count, setCount] = useState(0);	4	+ const [count, dispatch] = useReducer(reducer, 0);
5	return (	5	return (
6	- <button onClick={() => setCount(count + 1)}>	6	+ <button onClick={() => dispatch({ type: 'increment' })}>
7	Count: {count}	7	Count: {count}
8	</button>	8	</button>
9	);	9	);
10	}	10	}

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

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

Diff method

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

Characters

1		- The quick brown fox jumps over the lazy dog.
	1	+ The quick red cat leaps over the lazy dog.

Words (default)

1		- The quick brown fox jumps over the lazy dog.
	1	+ The quick red cat leaps over the lazy dog.

Lines

1		- The quick brown fox jumps over the lazy dog.
	1	+ The quick red cat leaps over the lazy dog.

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:


4	4	line 4
5	5	line 5
6		- old line 6
	6	+ new line 6
7	7	line 7
8	8	line 8

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:

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

Custom colors

Use addColor and removeColor props to change the highlight colors:

1		- The quick brown fox
	1	+ The quick red fox

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

1		- import { useState } from 'react';
	1	+ import { useReducer } from 'react';
2	2
3	3	function Counter() {
4		- const [count, setCount] = useState(0);
	4	+ const [count, dispatch] = useReducer(reducer, 0);
5	5	return (
6		- <button onClick={() => setCount(count + 1)}>
	6	+ <button onClick={() => dispatch({ type: 'increment' })}>
7	7	Count: {count}
8	8	</button>
9	9	);
10	10	}

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

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

JsonViewer

Getting started