text-diff-jsx
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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.

Package Sidebar

Install

npm i text-diff-jsx

Weekly Downloads

1

Version

0.1.0

License

MIT

Unpacked Size

35.3 kB

Total Files

21

Last publish

Collaborators

  • abenassi87