Skip to content

➕➖ The react component to generate pretty HTML for comparing commits or text.

License

Notifications You must be signed in to change notification settings

neighborhood999/react-gh-like-diff

Repository files navigation

react-gh-like-diff

npm Build Status Maintainability codecov styled with prettier

react-gh-like-diff

Generate Github like comparison based on diff2html.

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

Demo

Edit React Github Like Diff Example

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

LICENSE

MIT © Peng Jie