react-stylable-diff

Output differences between two strings in a stylable form.

Based on react-diff. Uses the diff module

Installation

npm install react-stylable-diff

Usage

Pass text to compare as props.inputA and props.inputB:

import React, {Component} from 'react';
import Diff from 'react-stylable-diff';

class MyComponent extends Component {
  render() {
    return (
      <Diff inputA="worst" inputB="blurst" />
    );
  }
}

You can also specify different values in props.type to compare in different ways. Valid values are 'chars', 'words', 'sentences' and 'json':

import React, {Component} from 'react';
import Diff from 'react-stylable-diff';

class MyComponent extends Component {
  render() {
    return (
      <Diff type="words"
        inputA="It was the worst of times"
        inputB="It was the blurst of times" />
    );
  }
}

Styling

Outputs standard <ins> and <del> tags so you will at least have the browser default styling for these. On my browser they appear crossed-out or underlined.

You will probably want to add your own styles to look all fancy.

The output is wrapped in a div with class 'Difference' so you can attach all your style rules to that. You can override this class with props.className if you like.

Here are some styles that might work:

.Difference {
  font-family: monospace;
}

.Difference > del {
  background-color: rgb(255, 224, 224);
  text-decoration: none;
}

.Difference > ins {
  background-color: rgb(201, 238, 211);
  text-decoration: none;
}

Example

import React, {Component} from 'react';
import Diff from 'react-stylable-diff';

class MyComponent extends Component {
  render() {
    return (
      <Diff inputA="worst" inputB="blurst" type="chars" />
    );
  }
}

License