React Diff Components
A set of intuitive components to render differences between two strings.Install
yarn add react-diff-components
or
npm i react-diff-components --save
Available props
- from: string, required;
- to: string, required;
- ignoreCase: bool, false by default;
- hideRemoved: bool, false by default;
- hideAdded: bool, false by default.
Note: ignoreCase is available only for
<DiffChars />
and <DiffWords />
Examples and use-cases
<DiffChars />
:
As the name suggests, <DiffChars />
will render differences at character level. Take the following as an example:import { React } from 'react';
import { DiffChars } from 'react-diff-components';
export default () => {
const A = 'http://www.example.com/a';
const B = 'https://www.example.com/A';
return (
<div>
<DiffChars from={A} to={B} />
<p>
Case insensitive:<br />
<DiffChars from={A} to={B} ignoreCase />
</p>
<ul>
<li>
Old string:<br />
<DiffChars from={A} to={B} hideAdded />
</li>
<li>
New string:<br />
<DiffChars from={A} to={B} hideRemoved />
</li>
</ul>
</div>
);
}
<DiffWords />
:
With <DiffWords />
, if a single character has changed the whole word gets highlighted. It displays the most human-friendly result in the majority of cases:import { React } from 'react';
import { DiffWords } from 'react-diff-components';
export default () => (
<div>
<DiffWords
from="Worlds change the word"
to="Words change the world"
/>
</div>
);
<DiffSentences />
:
Using <DiffSentences />
, differences get highlighted at a sentence level. That proves useful if users are supposed to read a full sentence to contextualise a change and approve it. Thake the following as an example:import { React } from 'react';
import { DiffSentences } from 'react-diff-components';
export default () => (
<div>
<DiffSentences
from="This sentence got removed. This one stayed almost the same."
to="This one stayed almost the same, but there's a catch!"
/>
</div>
);
<DiffLines />
:
The use-case for <DiffLines />
is mainly to highlight differences in code
:import { React } from 'react';
import { DiffLines } from 'react-diff-components';
export default () => (
<div>
<DiffLines
from="let a = 2;\nconst b = 3;"
to="let a= 4;\nconst b = 3;"
/>
</div>
);