text-diff-jsx

text-diff-jsx

• A simple text diff component to be used with React and based on google diff match patch library.

Dependencies

• diff-match-patch : ^1.0.5

Installation

npm i text-diff-jsx

API

Component: TextDiff

Inputs

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

Custom Objects

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;
}

Credits

This project is based on Google Diff Match Patch.