Skip to content

Commit 481a0a4

Browse files
authored
Update README.md
1 parent 4f97b8c commit 481a0a4

File tree

1 file changed

+14
-39
lines changed

1 file changed

+14
-39
lines changed

README.md

Lines changed: 14 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class Diff extends PureComponent {
6464
| newValue | `string` | `''` | New value as string. |
6565
| splitView | `boolean` | `true` | Switch between `unified` and `split` view. |
6666
| 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. |
6868
| hideLineNumbers | `boolean` | `false` | Show and hide line numbers. |
6969
| renderContent | `function` | `undefined` | Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting) |
7070
| onLineNumberClick | `function` | `undefined` | Event handler for line number click. `(lineId: string) => void` |
@@ -77,42 +77,6 @@ class Diff extends PureComponent {
7777
| 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. |
7878
| rightTitle | `string` | `undefined` | Column title for right section of the diff in split view. This will be ignored in inline view. |
7979

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-
import React, { PureComponent } from 'react';
100-
import ReactDiffViewer from 'react-diff-viewer';
101-
102-
class Diff extends PureComponent {
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-
11680
## Instance Methods
11781

11882
`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 {
182146

183147
## Text block diff comparison
184148

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+
```
186162

187163
```javascript
188164
import React, { PureComponent } from 'react';
@@ -210,7 +186,6 @@ class Diff extends PureComponent {
210186
newValue={newCode}
211187
compareMethod={DiffMethod.WORDS}
212188
splitView={true}
213-
renderContent={this.highlightSyntax}
214189
/>
215190
);
216191
};

0 commit comments

Comments
 (0)