rgl

react-gh-like-diff

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

Showing:

Popularity

Downloads/wk

3.3K

GitHub Stars

101

Maintenance

Last Commit

1yr ago

Contributors

8

Package

Dependencies

4

Size (min+gzip)

24.8KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial