Code -diff-html

NPM address: code-diff-html

Here’s what it looks like:

Code-diff-html instruction

This is my first NPM package, if there is any mistake, shout a word of understanding!

1. A tool to achieve the code comparison effect of GitLab

2. A library based on diff.js and Diff2HTML package, greatly simplifies the use, can let you implement code comparison functionality in a minute.

download

npm i code-diff-html --save
Copy the code

use

1. Introduce the drawDiff method

import { drawDiff } from 'code-diff-html'
Copy the code

2. Define a DOM element

<div id="myDiffElement"></div>
Copy the code

3. Run the drawDiff method

DrawDiff ({fileName:' character contrast ', oldObj:a, newObj:b, domId:'myDiffElement', options:{}})Copy the code

A complete example

import React from "react"; Import {drawDiff} from 'code-ff-html' const a = {"id": 1, "id": 1, "age":18, "sex":'男'} const b = {"id": 1, "id": 1, "sex":'男'} 2, "name": "xiaogang", "age":24, "Sex ":' male '} export default class extends componentDidMount(){componentDidMount(){fileName:' male ', oldObj:a, newObj:b, domId:'myDiffElement', options:{ outputFormat:"side-by-side" } }) } render() { return ( <> <div id="myDiffElement"></div> </> ); }}Copy the code

The effect

Description of drawDiff method

parameter type instructions Whether must
fileName string The file name no
oldObj object Old data object is
newObj object New data object is
domId string The DOM node ID that the content hosts is
options object Displays the configuration items of the box no

For more details please see

code-diff-html