React-string-diff NPM

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

diff

@everything-registry/sub-chunk-2615

0.2.0

4 years ago

0.1.0

4 years ago