Gathering detailed insights and metrics for @automatication/react-diff-viewer-continued
Gathering detailed insights and metrics for @automatication/react-diff-viewer-continued
A simple and beautiful text diff viewer component made with Diff and React.
3.2.11
176
MIT
TypeScript
123.80 kB
Installations
npm install @automatication/react-diff-viewer-continuedDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>= 8
Node Version
20.2.0
NPM Version
8.19.2
Releases
18
Languages
3
TypeScript
JavaScript
Shell
TypeScript (98.35%)
JavaScript (1.21%)
Shell (0.44%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
176 Stars
280 Commits
47 Forks
2 Watchers
9 Branches
1 Contributors
Updated on Jul 04, 2025
Maintainers
1
Package Meta Information
Latest Version
3.2.11
Package Id
@automatication/react-diff-viewer-continued@3.2.11
Unpacked Size
123.80 kB
Size
63.50 kB
File Count
30
NPM Version
8.19.2
Node Version
20.2.0
Published on
May 25, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Dev Dependencies
47
@babel/core@babel/preset-env@babel/preset-react@babel/preset-typescript@semantic-release/changelog@semantic-release/git@testing-library/react@types/diff@types/expect@types/memoize-one@types/mocha@types/node@types/prop-types@types/react@types/react-dom@types/webpack@typescript-eslint/eslint-plugin@typescript-eslint/parsercss-loadereslinteslint-config-airbnbeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hooksexpectfile-loadergh-pageshtml-webpack-pluginjestjest-environment-jsdommini-css-extract-pluginmochaprettierraw-loaderreactreact-domsasssass-loadersemantic-releasespyts-loaderts-nodetypescriptwebpackwebpack-cliwebpack-dev-server
A simple and beautiful text diff viewer component made with Diff and React.
Inspired by the 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.
Most credit goes to Pranesh Ravi who created the original diff viewer. I've just made a few modifications and updated the dependencies so they work with modern stacks.
Install
1yarn add react-diff-viewer-continued 2 3# or 4 5npm i react-diff-viewer-continued 6 7# or 8 9pnpm add react-diff-viewer-continued
Usage
1import React, { PureComponent } from 'react'; 2import ReactDiffViewer from 'react-diff-viewer-continued'; 3 4const oldCode = ` 5const a = 10 6const b = 10 7const c = () => console.log('foo') 8 9if(a > 10) { 10 console.log('bar') 11} 12 13console.log('done') 14`; 15const newCode = ` 16const a = 10 17const boo = 10 18 19if(a === 10) { 20 console.log('bar') 21} 22`; 23 24class Diff extends PureComponent { 25 render = () => { 26 return ( 27 <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} /> 28 ); 29 }; 30}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| oldValue | `string | Object` | '' |
| newValue | `string | Object` | '' |
| splitView | boolean | true | Switch between unified and split 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 the guide to use different methods. |
| renderGutter | (diffData) => ReactNode | undefined | Function that can be used to render an extra gutter with various information next to the line number. |
| hideLineNumbers | boolean | false | Show and hide line numbers. |
| renderContent | function | undefined | Render Prop API to render code in the diff viewer. Helpful for syntax highlighting |
| onLineNumberClick | function | undefined | Event handler for line number click. (lineId: string) => void |
| highlightLines | array[string] | [] | List of lines to be highlighted. Works together with onLineNumberClick. Line number are prefixed with L and R 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 lines 2-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 with showDiffOnly. |
| codeFoldMessageRenderer | function | Expand {number} of lines ... | Render Prop API to render code fold message. |
| styles | object | {} | To override style variables and styles. Learn more about overriding 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. |
| linesOffset | number | 0 | Number to start count code lines from. |
Instance Methods
resetCodeBlocks() - Resets the expanded code blocks to it's initial state. Return true on successful reset and false during unsuccessful reset.
Syntax Highlighting
Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use renderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.
An example using Prism JS
1// Load Prism CSS 2<link 3 href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css" 4/> 5 6// Load Prism JS 7<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
1import React, { PureComponent } from 'react'; 2import ReactDiffViewer from 'react-diff-viewer'; 3 4const oldCode = ` 5const a = 10 6const b = 10 7const c = () => console.log('foo') 8 9if(a > 10) { 10 console.log('bar') 11} 12 13console.log('done') 14`; 15const newCode = ` 16const a = 10 17const boo = 10 18 19if(a === 10) { 20 console.log('bar') 21} 22`; 23 24class Diff extends PureComponent { 25 highlightSyntax = (str) => ( 26 <pre 27 style={{ display: 'inline' }} 28 dangerouslySetInnerHTML={{ 29 __html: Prism.highlight(str, Prism.languages.javascript), 30 }} 31 /> 32 ); 33 34 render = () => { 35 return ( 36 <ReactDiffViewer 37 oldValue={oldCode} 38 newValue={newCode} 39 splitView={true} 40 renderContent={this.highlightSyntax} 41 /> 42 ); 43 }; 44}
Text block diff comparison
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.
1enum DiffMethod { 2 CHARS = 'diffChars', 3 WORDS = 'diffWords', 4 WORDS_WITH_SPACE = 'diffWordsWithSpace', 5 LINES = 'diffLines', 6 TRIMMED_LINES = 'diffTrimmedLines', 7 SENTENCES = 'diffSentences', 8 CSS = 'diffCss', 9}
1import React, { PureComponent } from 'react'; 2import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'; 3 4const oldCode = ` 5{ 6 "name": "Original name", 7 "description": null 8} 9`; 10const newCode = ` 11{ 12 "name": "My updated name", 13 "description": "Brand new description", 14 "status": "running" 15} 16`; 17 18class Diff extends PureComponent { 19 render = () => { 20 return ( 21 <ReactDiffViewer 22 oldValue={oldCode} 23 newValue={newCode} 24 compareMethod={DiffMethod.WORDS} 25 splitView={true} 26 /> 27 ); 28 }; 29}
Overriding Styles
React Diff Viewer uses emotion 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.
1 2// Default variables and style keys 3 4const defaultStyles = { 5 variables: { 6 light: { 7 diffViewerBackground: '#fff', 8 diffViewerColor: '#212529', 9 addedBackground: '#e6ffed', 10 addedColor: '#24292e', 11 removedBackground: '#ffeef0', 12 removedColor: '#24292e', 13 wordAddedBackground: '#acf2bd', 14 wordRemovedBackground: '#fdb8c0', 15 addedGutterBackground: '#cdffd8', 16 removedGutterBackground: '#ffdce0', 17 gutterBackground: '#f7f7f7', 18 gutterBackgroundDark: '#f3f1f1', 19 highlightBackground: '#fffbdd', 20 highlightGutterBackground: '#fff5b1', 21 codeFoldGutterBackground: '#dbedff', 22 codeFoldBackground: '#f1f8ff', 23 emptyLineBackground: '#fafbfc', 24 gutterColor: '#212529', 25 addedGutterColor: '#212529', 26 removedGutterColor: '#212529', 27 codeFoldContentColor: '#212529', 28 diffViewerTitleBackground: '#fafbfc', 29 diffViewerTitleColor: '#212529', 30 diffViewerTitleBorderColor: '#eee', 31 }, 32 dark: { 33 diffViewerBackground: '#2e303c', 34 diffViewerColor: '#FFF', 35 addedBackground: '#044B53', 36 addedColor: 'white', 37 removedBackground: '#632F34', 38 removedColor: 'white', 39 wordAddedBackground: '#055d67', 40 wordRemovedBackground: '#7d383f', 41 addedGutterBackground: '#034148', 42 removedGutterBackground: '#632b30', 43 gutterBackground: '#2c2f3a', 44 gutterBackgroundDark: '#262933', 45 highlightBackground: '#2a3967', 46 highlightGutterBackground: '#2d4077', 47 codeFoldGutterBackground: '#21232b', 48 codeFoldBackground: '#262831', 49 emptyLineBackground: '#363946', 50 gutterColor: '#464c67', 51 addedGutterColor: '#8c8c8c', 52 removedGutterColor: '#8c8c8c', 53 codeFoldContentColor: '#555a7b', 54 diffViewerTitleBackground: '#2f323e', 55 diffViewerTitleColor: '#555a7b', 56 diffViewerTitleBorderColor: '#353846', 57 } 58 }, 59 diffContainer?: {}, // style object 60 diffRemoved?: {}, // style object 61 diffAdded?: {}, // style object 62 marker?: {}, // style object 63 emptyGutter?: {}, // style object 64 highlightedLine?: {}, // style object 65 lineNumber?: {}, // style object 66 highlightedGutter?: {}, // style object 67 contentText?: {}, // style object 68 gutter?: {}, // style object 69 line?: {}, // style object 70 wordDiff?: {}, // style object 71 wordAdded?: {}, // style object 72 wordRemoved?: {}, // style object 73 codeFoldGutter?: {}, // style object 74 codeFold?: {}, // style object 75 emptyLine?: {}, // style object 76 content?: {}, // style object 77 titleBlock?: {}, // style object 78 splitView?: {}, // style object 79}
To override any style, just pass the new style object to the styles prop. New style will be computed using Object.assign(default, override).
For keys other than variables, the value can either be an object or string interpolation.
1import React, { PureComponent } from 'react'; 2import ReactDiffViewer from 'react-diff-viewer'; 3 4const oldCode = ` 5const a = 10 6const b = 10 7const c = () => console.log('foo') 8 9if(a > 10) { 10 console.log('bar') 11} 12 13console.log('done') 14`; 15const newCode = ` 16const a = 10 17const boo = 10 18 19if(a === 10) { 20 console.log('bar') 21} 22`; 23 24class Diff extends PureComponent { 25 highlightSyntax = (str) => ( 26 <span 27 style={{ display: 'inline' }} 28 dangerouslySetInnerHTML={{ 29 __html: Prism.highlight(str, Prism.languages.javascript), 30 }} 31 /> 32 ); 33 34 render = () => { 35 const newStyles = { 36 variables: { 37 dark: { 38 highlightBackground: '#fefed5', 39 highlightGutterBackground: '#ffcd3c', 40 }, 41 }, 42 line: { 43 padding: '10px 2px', 44 '&:hover': { 45 background: '#a26ea1', 46 }, 47 }, 48 }; 49 50 return ( 51 <ReactDiffViewer 52 styles={newStyles} 53 oldValue={oldCode} 54 newValue={newCode} 55 splitView={true} 56 renderContent={this.highlightSyntax} 57 /> 58 ); 59 }; 60}
Local Development
1pnpm install 2pnpm build # or use yarn build:watch 3pnpm start:examples
Check package.json for more build scripts.
Contributors
 Eric M. 💻 |  Andrei Kovalevsky 💻 |  Chang Hyun Kim 💻 |
License
MIT
No vulnerabilities found.
No security vulnerabilities found.