0.1.0 • Published 3 years ago

text-diff-jsx v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

NameTypeRequiredDescription
originalTextstringYesFirst text to be compared
modifiedTextstringYesSecond text to be compared
formatDiffTableFormatOptional, default: SideBySidePossible values: -SideBySide -LineByLine
hideMatchingLinesbooleanOptional, default: falsePossible 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.