react-gh-like-diff


!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

``sh
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:

`js
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. :mag_right:

Style

Import css style make sure render correctly:

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

You also can reference examples.

Props

$3

> string | defaults to ''

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

$3

> string | defaults to ''

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

$3

> string | defaults to ''

Passing unified diff as prop to generate pretty HTML.

$3

> object` | optional, See here

Reference diff2html docs for extra configuration setting.

Inspiration

nakajmg - gh-diff-html

LICENSE

MIT © Peng Jie