Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork313
A simple and beautiful text diff viewer component made with Diff and React.
License
praneshr/react-diff-viewer
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple and beautiful text diff viewer component made withDiff andReact.
Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
Checkhere for v2.0
yarn add react-diff-viewer# ornpm i react-diff-viewerimportReact,{PureComponent}from'react';importReactDiffViewerfrom'react-diff-viewer';constoldCode=`const a = 10const b = 10const c = () => console.log('foo')if(a > 10) { console.log('bar')}console.log('done')`;constnewCode=`const a = 10const boo = 10if(a === 10) { console.log('bar')}`;classDiffextendsPureComponent{render=()=>{return(<ReactDiffVieweroldValue={oldCode}newValue={newCode}splitView={true}/>);};}
| Prop | Type | Default | Description |
|---|---|---|---|
| oldValue | string | '' | Old value as string. |
| newValue | string | '' | New value as string. |
| splitView | boolean | true | Switch betweenunified andsplit view. |
| disableWordDiff | boolean | false | Show and hide word diff in a diff line. |
| compareMethod | DiffMethod | DiffMethod.CHARS | JsDiff text diff method used for diffing strings. Check out theguide to use different methods. |
| hideLineNumbers | boolean | false | Show and hide line numbers. |
| renderContent | function | undefined | Render Prop API to render code in the diff viewer. Helpful forsyntax highlighting |
| onLineNumberClick | function | undefined | Event handler for line number click.(lineId: string) => void |
| highlightLines | array[string] | [] | List of lines to be highlighted. Works together withonLineNumberClick. Line number are prefixed withL andR for the left and right section of the diff viewer, respectively. For example,L-20 means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example,[L-2, L-3, L-4, L-5] will highlight the lines2-5 in the left pane. |
| showDiffOnly | boolean | true | Shows only the diffed lines and folds the unchanged lines |
| extraLinesSurroundingDiff | number | 3 | Number of extra unchanged lines surrounding the diff. Works along withshowDiffOnly. |
| codeFoldMessageRenderer | function | Expand {number} of lines ... | Render Prop API to render code fold message. |
| styles | object | {} | To override style variables and styles. Learn more aboutoverriding styles |
| useDarkTheme | boolean | true | To enable/disable dark theme. |
| leftTitle | string | undefined | Column title for left section of the diff in split view. This will be used as the only title in inline view. |
| rightTitle | string | undefined | Column title for right section of the diff in split view. This will be ignored in inline view. |
resetCodeBlocks() - Resets the expanded code blocks to it's initial state. Returntrue on successful reset andfalse during unsuccessful reset.
Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. UserenderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.
An example usingPrism JS
// Load Prism CSS<linkhref="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"/>// Load Prism JS<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
importReact,{PureComponent}from'react';importReactDiffViewerfrom'react-diff-viewer';constoldCode=`const a = 10const b = 10const c = () => console.log('foo')if(a > 10) { console.log('bar')}console.log('done')`;constnewCode=`const a = 10const boo = 10if(a === 10) { console.log('bar')}`;classDiffextendsPureComponent{highlightSyntax=str=>(<prestyle={{display:'inline'}}dangerouslySetInnerHTML={{__html:Prism.highlight(str,Prism.languages.javascript),}}/>);render=()=>{return(<ReactDiffVieweroldValue={oldCode}newValue={newCode}splitView={true}renderContent={this.highlightSyntax}/>);};}
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',WORDS_WITH_SPACE='diffWordsWithSpace',LINES='diffLines',TRIMMED_LINES='diffTrimmedLines',SENTENCES='diffSentences',CSS='diffCss',}
importReact,{PureComponent}from'react';importReactDiffViewer,{DiffMethod}from'react-diff-viewer';constoldCode=`{ "name": "Original name", "description": null}`;constnewCode=`{ "name": "My updated name", "description": "Brand new description", "status": "running"}`;classDiffextendsPureComponent{render=()=>{return(<ReactDiffVieweroldValue={oldCode}newValue={newCode}compareMethod={DiffMethod.WORDS}splitView={true}/>);};}
React Diff Viewer usesemotion for styling. It also offers a simple way to override styles and style variables. You can supply different variables for both light and dark themes. Styles will be common for both themes.
Below are the default style variables and style object keys.
// Default variables and style keysconstdefaultStyles={variables:{light:{diffViewerBackground:'#fff',diffViewerColor:'212529',addedBackground:'#e6ffed',addedColor:'#24292e',removedBackground:'#ffeef0',removedColor:'#24292e',wordAddedBackground:'#acf2bd',wordRemovedBackground:'#fdb8c0',addedGutterBackground:'#cdffd8',removedGutterBackground:'#ffdce0',gutterBackground:'#f7f7f7',gutterBackgroundDark:'#f3f1f1',highlightBackground:'#fffbdd',highlightGutterBackground:'#fff5b1',codeFoldGutterBackground:'#dbedff',codeFoldBackground:'#f1f8ff',emptyLineBackground:'#fafbfc',gutterColor:'#212529',addedGutterColor:'#212529',removedGutterColor:'#212529',codeFoldContentColor:'#212529',diffViewerTitleBackground:'#fafbfc',diffViewerTitleColor:'#212529',diffViewerTitleBorderColor:'#eee',},dark:{diffViewerBackground:'#2e303c',diffViewerColor:'#FFF',addedBackground:'#044B53',addedColor:'white',removedBackground:'#632F34',removedColor:'white',wordAddedBackground:'#055d67',wordRemovedBackground:'#7d383f',addedGutterBackground:'#034148',removedGutterBackground:'#632b30',gutterBackground:'#2c2f3a',gutterBackgroundDark:'#262933',highlightBackground:'#2a3967',highlightGutterBackground:'#2d4077',codeFoldGutterBackground:'#21232b',codeFoldBackground:'#262831',emptyLineBackground:'#363946',gutterColor:'#464c67',addedGutterColor:'#8c8c8c',removedGutterColor:'#8c8c8c',codeFoldContentColor:'#555a7b',diffViewerTitleBackground:'#2f323e',diffViewerTitleColor:'#555a7b',diffViewerTitleBorderColor:'#353846',}},diffContainer?:{},// style objectdiffRemoved?:{},// style objectdiffAdded?:{},// style objectmarker?:{},// style objectemptyGutter?:{},// style objecthighlightedLine?:{},// style objectlineNumber?:{},// style objecthighlightedGutter?:{},// style objectcontentText?:{},// style objectgutter?:{},// style objectline?:{},// style objectwordDiff?:{},// style objectwordAdded?:{},// style objectwordRemoved?:{},// style objectcodeFoldGutter?:{},// style objectemptyLine?:{},// style objectcontent?:{},// style objecttitleBlock?:{},// style objectsplitView?:{},// style object}
To override any style, just pass the new style object to thestyles prop. New style will be computed usingObject.assign(default, override).
For keys other thanvariables, the value can either be an object or string interpolation.
importReact,{PureComponent}from'react';importReactDiffViewerfrom'react-diff-viewer';constoldCode=`const a = 10const b = 10const c = () => console.log('foo')if(a > 10) { console.log('bar')}console.log('done')`;constnewCode=`const a = 10const boo = 10if(a === 10) { console.log('bar')}`;classDiffextendsPureComponent{highlightSyntax=str=>(<spanstyle={{display:'inline'}}dangerouslySetInnerHTML={{__html:Prism.highlight(str,Prism.languages.javascript),}}/>);render=()=>{constnewStyles={variables:{dark:{highlightBackground:'#fefed5',highlightGutterBackground:'#ffcd3c',},},line:{padding:'10px 2px','&:hover':{background:'#a26ea1',},},};return(<ReactDiffViewerstyles={newStyles}oldValue={oldCode}newValue={newCode}splitView={true}renderContent={this.highlightSyntax}/>);};}
yarn installyarn build# or use yarn build:watchyarn start:examplesCheck package.json for more build scripts.
MIT
About
A simple and beautiful text diff viewer component made with Diff and React.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.