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>
);