react-code-diff-lite

一个基于 diff2html 的 React diff 组件

demo https://react-code-diff-lite-ifmiss.vercel.app/

使用方法

安装

npm install react-code-diff-lite

引入

importReactfrom"react";importCodeDifffrom"react-code-diff-lite";constnewStr=`{ a: 1, b: 2, c: () => { return this.a }}`;constoldStr=`{ a: 1, b: 2, getValue: () => { return this.b }}`;constMain: React.FC=()=>{return(<React.Fragment><p>修改</p><div><CodeDiffoldStr={oldStr}newStr={newStr}context={10}/></div><p>删除</p><div><CodeDiffoldStr={oldStr}newStr=""context={10}/></div><p>添加</p><div><CodeDiffoldStr=""newStr={newStr}context={10}/></div><p>新增</p><div><CodeDiffoldStr=""newStr={newStr}context={10}outputFormat="side-by-side"/></div><p>编辑</p><div><CodeDiffoldStr={oldStr}newStr={newStr}context={10}outputFormat="line-by-line"/></div><p>删除</p><div><CodeDiffoldStr={oldStr}newStr=""context={10}outputFormat="side-by-side"/></div></React.Fragment>);};

组件属性如下：

• oldStr: 旧代码
• newStr: 新代码
• context: 代码对比范围，默认为 0 也就是只显示改动的地方，如果为 10 就是除改动地方之外多显示上下 10 行代码
• outputFormat: 展示方式行内对比和两个窗口对比 'line-by-line' | 'side-by-side'
• theme: 主题色 支持自动跟随系统色的方式 'auto', 或者手动设置 'light' | 'dark', 默认'auto'
• 其他属性可参考 https://github.com/rtfpessoa/diff2html#diff2html-configuration

实现效果

line-by-line 行内对比

两个窗口对比

side-by-side

夜间模式效果