I wanted to use this library in my project -
I have installed this using npm
My components-
import React, {useState, useCallback} from 'react';
import {parseDiff, Diff, Hunk} from 'react-diff-view';
const EMPTY_HUNKS = [];
const useInput = initialValue => {
const [value, onChange] = useState(initialValue);
return {
value,
onChange(e) {
onChange(e.target.value);
},
};
};
const DiffViewer = ({diffText}) => {
const oldCode = `
const a = 10
const b = 10
const c = () => console.log('foo')
if(a > 10) {
console.log('bar')
}
console.log('done')
`
const newCode = `
const a = 10
const boo = 10
if(a === 10) {
console.log('bar')
}
`
const oldText = useInput(oldCode);
const newText = useInput(newCode);
const [{type, hunks}, setDiff] = useState('');
const updateDiffText = useCallback(
() => {
const diffText = formatLines(diffLines(oldText.value, newText.value), {context: 3});
const [diff] = parseDiff(diffText, {nearbySequences: 'zip'});
setDiff(diff);
},
[oldText.value, newText.value, setDiff],
);
return (
<div>
<a href="#" onClick={updateDiffText}>GENERATE DIFF</a>
<Diff key={oldCode + '-' + newCode} viewType="split" diffType={type} hunks={hunks || EMPTY_HUNKS}>
{hunks => hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk} />)}
</Diff>
</div>
);
}
export default DiffViewer;
I wanted to get the diff of oldtext and newtext,
It says diffType={type} type is undefined,
How to use this can someone guide me with basic usage.
I wanted to use this library in my project -
I have installed this using npm
My components-
I wanted to get the diff of oldtext and newtext,
It says
diffType={type}type is undefined,How to use this can someone guide me with basic usage.