You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+14-39Lines changed: 14 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,7 +64,7 @@ class Diff extends PureComponent {
64
64
| newValue |`string`|`''`| New value as string. |
65
65
| splitView |`boolean`|`true`| Switch between `unified` and `split` view. |
66
66
| disableWordDiff |`boolean`|`false`| Show and hide word diff in a diff line. |
67
-
| compareMethod |`DiffMethod`|`DiffMethod.CHARS`| JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#compare-methods) to use different methods. |
67
+
| compareMethod |`DiffMethod`|`DiffMethod.CHARS`| JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods. |
68
68
| hideLineNumbers |`boolean`|`false`| Show and hide line numbers. |
69
69
| renderContent |`function`|`undefined`| Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)|
70
70
| onLineNumberClick |`function`|`undefined`| Event handler for line number click. `(lineId: string) => void`|
@@ -77,42 +77,6 @@ class Diff extends PureComponent {
77
77
| 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. |
78
78
| rightTitle |`string`|`undefined`| Column title for right section of the diff in split view. This will be ignored in inline view. |
79
79
80
-
## Compare Methods
81
-
82
-
React diff viewer supports 7 types of jsDiff methods. By default, `DiffMethod.CHARS` is used. Other available options are the following.
83
-
84
-
```javascript
85
-
enum DiffMethod {
86
-
CHARS='diffChars',
87
-
WORDS='diffWords',
88
-
WORDS_WITH_SPACE='diffWordsWithSpace',
89
-
LINES='diffLines',
90
-
TRIMMED_LINES='diffTrimmedLines',
91
-
SENTENCES='diffSentences',
92
-
CSS='diffCss',
93
-
}
94
-
```
95
-
96
-
To change the diff methods, import the `DiffMethod` enum and use the available options.
97
-
98
-
```javascript
99
-
importReact, { PureComponent } from'react';
100
-
importReactDiffViewerfrom'react-diff-viewer';
101
-
102
-
classDiffextendsPureComponent {
103
-
render= () => {
104
-
return (
105
-
<ReactDiffViewer
106
-
oldValue={oldCode}
107
-
newValue={newCode}
108
-
splitView={true}
109
-
compareMethod={DiffMethod.WORDS}
110
-
/>
111
-
);
112
-
};
113
-
}
114
-
```
115
-
116
80
## Instance Methods
117
81
118
82
`resetCodeBlocks()` - Resets the expanded code blocks to it's initial state. Return `true` on successful reset and `false` during unsuccessful reset.
@@ -182,7 +146,19 @@ class Diff extends PureComponent {
182
146
183
147
## Text block diff comparison
184
148
185
-
Different styles of text block diffing are possible by using the enums corresponding to various v4.0.1 JsDiff text block method names ([learn more](https://github.com/kpdecker/jsdiff/tree/v4.0.1#api)).
149
+
Different styles of text block diffing are possible by using the enums corresponding to variou JsDiff methods ([learn more](https://github.com/kpdecker/jsdiff/tree/v4.0.1#api)). The supported methods are as follows.
150
+
151
+
```javascript
152
+
enum DiffMethod {
153
+
CHARS='diffChars',
154
+
WORDS='diffWords',
155
+
WORDS_WITH_SPACE='diffWordsWithSpace',
156
+
LINES='diffLines',
157
+
TRIMMED_LINES='diffTrimmedLines',
158
+
SENTENCES='diffSentences',
159
+
CSS='diffCss',
160
+
}
161
+
```
186
162
187
163
```javascript
188
164
importReact, { PureComponent } from'react';
@@ -210,7 +186,6 @@ class Diff extends PureComponent {
0 commit comments