Skip to content

Commit 6af67c3

Browse files
praneshrpraneshr
authored
V2.0 (#18)
V2.0
2 parents c5ec1c1 + 55fa0a0 commit 6af67c3

20 files changed

+4653
-2640
lines changed

‎.eslintrc

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
3+
"rules": {
4+
"no-tabs": "off",
5+
"@typescript-eslint/indent": ["error", 2],
6+
"max-len": ["error", {
7+
"code": 100
8+
}],
9+
"arrow-body-style": "off",
10+
},
11+
"settings": {
12+
"import/resolver": {
13+
"node": {
14+
"extensions": [".js", ".jsx", ".ts", ".tsx"]
15+
}
16+
}
17+
},
18+
"env": {
19+
"mocha": true,
20+
"node": true,
21+
"browser": true,
22+
},
23+
}

‎README.md

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
> I'm working on the new version of React Diff Viewer. It will be a full code and design refresh. If you feel something should be added, please create an issue.
2-
3-
1+
<br/>
2+
<br/>
3+
<br/>
4+
<br/>
45
<p align="center">
5-
<img src='https://image.ibb.co/dO5cyL/rdv.png' width="80%" alt='React Diff Viewer' />
6+
<img src='https://i.ibb.co/k9bYvq0/Full-View.png' width="80%" alt='React Diff Viewer' />
67
</p>
78
<br/>
9+
<br/>
10+
<br/>
11+
<br/>
812

913
[![Build Status](https://travis-ci.com/praneshr/react-diff-viewer.svg?branch=master)](https://travis-ci.com/praneshr/react-diff-viewer)
1014
[![npm version](https://badge.fury.io/js/react-diff-viewer.svg)](https://badge.fury.io/js/react-diff-viewer)
1115
[![GitHub license](https://img.shields.io/github/license/praneshr/react-diff-viewer.svg)](https://github.com/praneshr/react-diff-viewer/blob/master/LICENSE)
1216

17+
A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
1318

14-
A simple and beautiful text diff viewer made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
15-
16-
Inspired from Github's diff viewer, it includes features like split view, unified view, word diff and line highlight. It is highly customizable and it supports almost all languages. Check out the [demo](https://praneshravi.in/react-diff-viewer/).
19+
Inspired from Github's 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. Check out the [demo](https://praneshravi.in/react-diff-viewer/).
1720

1821
## Install
1922

@@ -68,15 +71,22 @@ class Diff extends PureComponent {
6871
|Prop |Type |Default |Description |
6972
|------------------|---------------|--------------|----------------------------------------------|
7073
|oldValue |`string` |`''` |Old value as string. |
71-
|newVlaue |`string` |`''` |New value as string. |
74+
|newValue |`string` |`''` |New value as string. |
7275
|splitView |`boolean` |`true` |Switch between `unified` and `split` view. |
7376
|disableWordDiff |`boolean` |`false` |Show and hide word diff in a diff line. |
7477
|hideLineNumbers |`boolean` |`false` |Show and hide line numbers. |
7578
|renderContent |`function` |`undefined` |Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting) |
7679
|onLineNumberClick |`function` |`undefined` |Event handler for line number click. `(lineId: string) => void` |
77-
|hightlightLines |`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. |
80+
|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. |
81+
|showDiffOnly |`boolean` |`true` |Shows only the diffed lines and folds the unchanged lines|
82+
|extraLinesSurroundingDiff|`number`|`3` |Number of extra unchanged lines surrounding the diff. Works along with `showDiffOnly`.|
83+
|codeFoldMessageRenderer|`function`|`Expand {number} of lines ...` |Render Prop API to render code fold message.|
7884
|styles |`object` |`{}` |To override style variables and styles. Learn more about [overriding styles](#overriding-styles) |
7985

86+
## Instance Methods
87+
88+
`resetCodeBlocks()` - Resets the expanded code blocks to it's initial state. Return `true` on successful reset and `false` during unsuccessful reset.
89+
8090
## Syntax Highlighting
8191

8292
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 acheive this.
@@ -147,6 +157,7 @@ Below are the default style variables and style object keys.
147157

148158
const defaultStyles = {
149159
variables: {
160+
diffViewerBackground: '#fff',
150161
addedBackground: '#e6ffed',
151162
addedColor: '#24292e',
152163
removedBackground: '#ffeef0',
@@ -159,26 +170,29 @@ const defaultStyles = {
159170
gutterBackgroundDark: '#f3f1f1',
160171
highlightBackground: '#fffbdd',
161172
highlightGutterBackground: '#fff5b1',
173+
codeFoldGutterBackground: '#dbedff',
174+
codeFoldBackground: '#f1f8ff',
175+
emptyLineBackground: '#fafbfc',
162176
},
163-
diffContainer: {}, // style object
164-
diffRemoved: {}, // style object
165-
diffAdded: {}, // style object
166-
marker: {}, // style object
167-
gutter: {}, // style object
168-
leftGutter: {}, // style object
169-
rightGutter: {}, // style object
170-
hightlightedLine: {}, // style object
171-
hightlightedGutter: {}, // style object
172-
line: {}, // style object
173-
wordDiff: {}, // style object
174-
wordAdded: {}, // style object
175-
wordRemoved: {}, // style object
177+
diffContainer?: {}, //style object
178+
diffRemoved?: {}, //style object
179+
diffAdded?: {}, //style object
180+
marker?: {}, //style object
181+
highlightedLine?: {}, //style object
182+
highlightedGutter?: {}, //style object
183+
gutter?: {}, //style object
184+
line?: {}, //style object
185+
wordDiff?: {}, //style object
186+
wordAdded?: {}, //style object
187+
wordRemoved?: {}, //style object
188+
codeFoldGutter?: {}, //style object
189+
emptyLine?: {}, //style object
176190
}
177191
```
178192

179193
To override any style, just pass the new style object to the `styles` prop. New style will be computed using `Object.assign(default, override)`.
180194

181-
For keys other than `variables`, the value can either be an object or string interpolation. Emotion's dynamic styles are not yet supported.
195+
For keys other than `variables`, the value can either be an object or string interpolation.
182196

183197
```javascript
184198
import React, { PureComponent } from 'react'
@@ -206,7 +220,7 @@ if(a === 10) {
206220

207221
class Diff extends PureComponent {
208222

209-
highlightSyntax = str => <pre
223+
highlightSyntax = str => <span
210224
style={{ display: 'inline' }}
211225
dangerouslySetInnerHTML={{ __html: Prism.highlight(str, Prism.languages.javascript) }}
212226
/>

‎examples/src/index.ejs

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,36 @@
55
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
66
<title>React Diff Viewer</title>
77
<meta name="author" content="Pranesh Ravi" />
8-
<meta name="description" content="A simple and beautiful text diff viewer made with Diff and React." />
8+
<meta name="description" content="A simple and beautiful text diff viewer component made with diff and React" />
99
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1010
<meta name="theme-color" content="#704DFF" />
1111

12-
<meta content="https://image.ibb.co/hGUuTL/react-diff-viewer.png" property="og:image"/>
12+
<meta content="https://i.ibb.co/ChNkdjs/Banner.png" property="og:image"/>
1313
<meta content="React Diff Viewer" property="og:site_name" />
1414
<meta content="object" property="og:type" />
1515
<meta content="React Diff Viewer" property="og:title" />
1616
<meta content="https://github.com/praneshr/react-diff-viewer" property="og:url" />
17-
<meta content="A simple and beautiful text diff viewer made with Diff and React." property="og:description" />
17+
<meta content="A simple and beautiful text diff viewer component made with diff and React" property="og:description" />
1818

1919
<meta name="twitter:card" value="summary_large_image"/>
2020
<meta name="twitter:site" value="@pranesh_ravi" />
2121
<meta name="twitter:creator" value="@pranesh_ravi" />
2222
<meta name="twitter:title" content="React Diff Viewer" />
23-
<meta name="twitter:description" content="A simple and beautiful text diff viewer made with Diff and React." />
24-
<meta name="twitter:image" content="https://image.ibb.co/hGUuTL/react-diff-viewer.png" />
23+
<meta name="twitter:description" content="A simple and beautiful text diff viewer component made with diff and React" />
24+
<meta name="twitter:image" content="https://i.ibb.co/ChNkdjs/Banner.png" />
2525
</head>
2626
<body>
2727
<div id="app"></div>
2828
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
2929
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-json.min.js"></script>
30+
<!-- Global site tag (gtag.js) - Google Analytics -->
31+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-53857863-6"></script>
32+
<script>
33+
window.dataLayer = window.dataLayer || [];
34+
function gtag(){dataLayer.push(arguments);}
35+
gtag('js', new Date());
36+
37+
gtag('config', 'UA-53857863-6');
38+
</script>
3039
</body>
3140
</html>

0 commit comments

Comments
 (0)