Package Exports

react-gh-like-diff

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-gh-like-diff) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-gh-like-diff

Generate Github like comparison based on diff2html.

You can compare string or given unified diff to generate pretty HTML.

Demo

Installation

yarn add react-gh-like-diff

# or

npm install react-gh-like-diff --save

Configuration

react-gh-like-diff is based on diff2html. The default configuration:

const defaultOptions = {
  originalFileName: 'Unknown-File-Name',
  updatedFileName: 'Unknown-File-Name',
  inputFormat: 'diff',
  outputFormat: 'side-by-side',
  showFiles: false,
  matching: 'none',
  matchWordsThreshold: 0.25,
  matchingMaxComparisons: 2500,
  maxLineSizeInBlockForComparison: 200,
  maxLineLengthHighlight: 10000,
  renderNothingWhenEmpty: false
};

You can custom options for you want, just pass options as props. The configuration you can reference here. 🔎

Style

Import css style make sure render correctly:

import 'react-gh-like-diff/dist/css/diff2html.min.css';

You also can reference examples.

Props

past

string | defaults to ''

Passing past string as past prop with current prop for comparison.

current

string | defaults to ''

Passing current string as current prop with past prop for comparison.

diffString

string | defaults to ''

Passing unified diff as prop to generate pretty HTML.

options

object | optional, See here

Reference diff2html docs for extra configuration setting.

Inspiration

nakajmg - gh-diff-html