Compare two texts line by line, with the words that changed highlighted. Use it to review a change before it is saved, such as an edited document, a config file or a generated answer.
Pass the text before in previousValue and the text after in currentValue. Removed lines are marked with a minus and added lines with a plus.
mode="split" puts the previous text on the left and the current text on the right.
With contextLines, the unchanged lines far from a change fold into a button that brings them back.
diffMethod sets what is highlighted inside a changed line: words, chars, or lines for none.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| previousValue | the text before the change | string | - | - |
| currentValue | the text after the change | string | - | - |
| mode | how the two texts are laid out | string | 'unified', 'split' | unified |
| diffMethod | what is highlighted inside a changed line | string | 'words', 'chars', 'lines' | words |
| contextLines | unchanged lines kept around each change, the rest folds | number | - | all of them |
| withLineNumbers | show the line numbers | boolean | - | true |
| addColor | color of the added lines | string | - | theme success |
| removeColor | color of the removed lines | string | - | theme error |
| expandLabel | text of the button of a folded run | (hidden: number) => string | - | Show N hidden lines |
| ... | native props, passed to the root | HTMLAttributes | 'aria-label', 'className', ... | - |
The ref points at the root div.
Each line starts with a + or a -, so a change reads as text and not only as color. Folded lines are behind a real button, with its text set by expandLabel.
The diff is a table of lines. For a long change, say what changed in a sentence next to it.