react-rich-diff

0.6.1 • Public • Published

react-rich-diff

Build Status NPM version

React component to display a rich diff between two Markup-it documents.

Installation

$ npm install react-rich-diff --save

Usage

const React = require('react');
const RichDiff = require('react-rich-diff');
const MarkupIt = require('markup-it');
const markdown = require('markup-it/lib/markdown');
 
const state = MarkupIt.State.create(markdown);
 
const MyApp = React.createClass({
    render() {
        const original = state.deserializeToDocument('Hello **World**');
        const modified = state.deserializeToDocument('Hello **World 2**');
 
        const state = RichDiff.State.create(original, modified);
 
        return (
            <RichDiff
                state={state}
                />
        )
    }
})

CSS

react-rich-diff creates HTML elements with classes diff-<kind>-<type.

kind can be one of block, inline or character. type can be one of added, removed or modified.

Package Sidebar

Install

npm i react-rich-diff

Weekly Downloads

6

Version

0.6.1

License

Apache-2.0

Last publish

Collaborators

  • samypesse