suedar / react-code-differ

react 的代码差异查看组件,支持本地与 github 两种方法实现

Home Page:https://63c4ee8240b12d9fbe70f43c-vvmeeybrzf.chromatic.com/?path=/docs/react-code-differ--%E6%9C%AC%E5%9C%B0%E6%96%87%E4%BB%B6%E5%BC%95%E5%85%A5

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-code-differ

本组件可用于代码差异的查看, 由于是 react 编写的,仅支持 react 版本

组件文档地址

先支持两种使用方式:

  1. 本地文件引入
  2. github 线上 diff 地址引入

安装

npm i react-code-differ

本地文件引入

import { CodeDiff } from "react-code-differ";
import diffText from './diffText'

export const MyComponent = (args) => {
  return (
    <CodeDiff type={"local"} path={diffText} />
  );
};

github 线上 diff 地址引入

import { CodeDiff } from "react-code-differ";

export const MyComponent = (args) => {
  const path = "https://api.github.com/repos/rtfpessoa/diff2html/pulls/106"
  return (
    <CodeDiff type={"github"} path={path} />
  );
};

About

react 的代码差异查看组件,支持本地与 github 两种方法实现

https://63c4ee8240b12d9fbe70f43c-vvmeeybrzf.chromatic.com/?path=/docs/react-code-differ--%E6%9C%AC%E5%9C%B0%E6%96%87%E4%BB%B6%E5%BC%95%E5%85%A5


Languages

Language:JavaScript 43.8%Language:HTML 27.1%Language:SCSS 18.0%Language:Mustache 11.1%Language:Shell 0.1%