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.