react-diff-viewer を使って GitHub 風の diff を表示する

[react-diff-viewer](https://github.com/praneshr/react-diff-viewer) は React アプリケーションで GitHub 風の Diff を簡単に表示することできるライブラリです。

[公式のデモはこちら](https://praneshravi.in/react-diff-viewer/)です。

React.js で Diff を表示するライブラリは他にも、[react-diff-view](https://github.com/otakustay/react-diff-view) などがありますが、こちらは react-diff-viewer に関する記事になりますのでお間違いなきように。

## サンプルコード

[react-diff-viewer-sample](https://github.com/t0yohei/react-diff-viewer-sample)

## 環境情報

- yarn: 1.22.4
- react: 16.13.1
- react-diff-viewer: 3.1.1

## 使い方

### インストール

```bash
$ yarn add react-diff-viewer

# or

$ npm i react-diff-viewer
```

### サンプル実装

```App.jsx
import React, { PureComponent } from "react";
import ReactDiffViewer from "react-diff-viewer";

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')
}
`;

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer
        oldValue={oldCode}
        newValue={newCode}
        splitView={true}
        leftTitle={"oldCode"}
        rightTitle={"newCode"}
      />
    );
  };
}

export default Diff;
```

### 表示される画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152779/1a2f69a6-03e2-0c3d-0254-2f8906b24953.png)

## オプション

下記のサンプルコードを使用して、いくつかのオプションを紹介します。

```App2.jsx
import React, { PureComponent } from "react";
import ReactDiffViewer from "react-diff-viewer";

const oldText = `
# react-diff-viewer を使って GitHub 風の diff を表示する

[react-diff-viewer](https://github.com/praneshr/react-diff-viewer) は React アプリケーションで GitHub 風の Diff を簡単に表示することできるライブラリです。


React.js で Diff を表示するライブラリは他にも、[react-diff-view](https://github.com/otakustay/react-diff-view) がありますが、こちらは react-diff-viewer に関する記事になりますのでお間違いなきように。

## SampleCode

[react-diff-viewer-sample](https://github.com/t0yohei/react-diff-viewer-sample)
`;
const newText = `
# react-diff-viewer を使って GitHub 風の diff を表示する

[react-diff-viewer](https://github.com/praneshr/react-diff-viewer) は React アプリケーションで GitHub 風の Diff を簡単に表示することできるライブラリです。

[公式のデモはこちら](https://praneshravi.in/react-diff-viewer/)です。

React.js で Diff を表示するライブラリは他にも、[react-diff-view](https://github.com/otakustay/react-diff-view) がありますが、こちらは react-diff-viewer に関する記事になりますのでお間違いなきように。

## サンプルコード

[react-diff-viewer-sample](https://github.com/t0yohei/react-diff-viewer-sample)

## 環境情報

- yarn: 1.22.4
- react: 16.13.1
- react-diff-viewer: 3.1.1
`;

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer
        oldValue={oldText}
        newValue={newText}
        splitView={false}
        disableWordDiff={true}
        hideLineNumbers={true}
        useDarkTheme={true}
      />
    );
  };
}

export default Diff;
```

### 表示される画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152779/28ee1e56-dbe3-d065-4bf5-aaf94028f409.png)

### オプションの説明

| Prop            | 型        | 初期値  | 詳細                                                |
| --------------- | --------- | ------- | --------------------------------------------------- |
| splitView       | `boolean` | `true`  | `unified` と `split` の表示を切り替えます。         |
| disableWordDiff | `boolean` | `false` | diff の中の単語 diff の表示・非表示を切り替えます。 |
| hideLineNumbers | `boolean` | `false` | 行番号の表示・非表示を切り替えます。                |
| useDarkTheme    | `boolean` | `true`  | ダークモードの ON/OFF を切り替えます                |

その他、詳細なオプションは下記をご参照ください。
https://github.com/praneshr/react-diff-viewer#props

## 実装上の注意
UIkit v3.5.7 などをアプリケーション全体に適用している場合、 `ReactDiffViewer` コンポーネント内の `pre` タグのスタイルが UIkit などにより上書かれてしまい、 `react-diff-viewer` のスタイルが崩れる場合があります。
dirty hacking な回避方法としては、下記のような css ファイルを別途用意して、 `react-diff-viewer` を使用している jsx のファイル内で require してあげるなどがあります。

```style.scss
pre {
  padding: 0px !important;
  border: none !important;
  border-radius: unset !important;
  background: inherit !important;
}
```