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