- A simple text diff
component
to be used with React and based ongoogle diff match patch
library.
-
diff-match-patch
: ^1.0.5
npm i text-diff-jsx
Component: TextDiff
Name | Type | Required | Description |
---|---|---|---|
originalText | string | Yes | First text to be compared |
modifiedText | string | Yes | Second text to be compared |
format | DiffTableFormat |
Optional, default: SideBySide
|
Possible values: - SideBySide - LineByLine
|
hideMatchingLines | boolean | Optional, default: false
|
Possible values: - true : Only shows lines with differences.- false : shows all lines |
export type DiffTableFormat = 'SideBySide' | 'LineByLine';
export type SideDiff = 'both' | 'left' | 'right';
export interface DiffTableFormatOption {
id: string;
name: string;
label: string;
value: DiffTableFormat;
icon?: string;
disabled?: boolean;
}
export interface DiffPart {
content: string;
isDiff: boolean;
}
export interface DiffLineResult {
lineNumber: number;
prefix: string;
lineContent: string;
lineDiffs: DiffPart[];
}
export interface DiffTableRowResult {
id?: number;
left?: DiffLineResult;
right?: DiffLineResult;
belongTo: SideDiff;
hasDiffs: boolean;
numDiffs: number;
}
export interface ProcessLinesOptions {
id: number;
leftLines: string[];
rightLines: string[];
leftNumber: number;
rightNumber: number;
hasDiffs?: boolean;
}
This project is based on Google Diff Match Patch.