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

importReactfrom'react';importStringDifffrom'react-string-diff';constoldValue='Lorem ipsum dolor sit amet';constnewValue='Loremi psum sit amet';constDiffViewer=()=>{return(<StringDiffoldValue={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.

enumDiffMethod{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

typeDiffStyles={added: React.CSSProperties;removed: React.CSSProperties;default: React.CSSProperties;};constdefaultStyle: 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