react-string-diff

Highlight the difference between two strings in a React component

Install

yarn add react-string-diff

# or

npm i react-string-diff

Props

Prop	Type	Default	Description
oldValue	string*		Old value as string.
newValue	string*		New value as string.
component	elementType	div	The component used for the root node. Either a string to use a HTML element or a component
className	string		Css class for the root node
method	DiffMethod	DiffMethod.Chars	JsDiff text diff method used for diffing strings. Check out supported methods.
styles	DiffStyles	defaultStyles	Overriding styles.

Usage

import React  from 'react';
import StringDiff from 'react-string-diff';

const oldValue = 'Lorem ipsum dolor sit amet';
const newValue = 'Loremi psum sit amet';

const DiffViewer = () => {
  return (<StringDiff oldValue={oldValue} newValue={newValue} />)
}

Methods

Different styles of text block diffing are possible by using the enums corresponding to variou JsDiff methods (learn more). The supported methods are as follows.

enum DiffMethod {
  Chars = 'diffChars',
  Words = 'diffWords',
  WordsWithSpace = 'diffWordsWithSpace',
  Lines = 'diffLines',
  TrimmedLines = 'diffTrimmedLines',
  Sentences = 'diffSentences',
  CSS = 'diffCss'
}

Overriding Styles

React String diff uses plan CSS object for styling. Override styles object to apply a custom styles variables

type DiffStyles = {
  added: React.CSSProperties;
  removed: React.CSSProperties;
  default: React.CSSProperties;
};

const defaultStyle: DiffStyles = {
  added: {
    backgroundColor: 'lightgreen'
  },
  removed: {
    backgroundColor: 'salmon'
  },
  default: {}
};

Local Development

yarn install
yarn start
yarn start:example

Check package.json for more build scripts.

License

MIT