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

react-diff-viewer は React アプリケーションで GitHub 風の Diff を簡単に表示することできるライブラリです。

公式のデモはこちらです。

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

サンプルコード

react-diff-viewer-sample

環境情報

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

使い方

インストール

$ 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;

表示される画面

オプション

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

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;

表示される画面

オプションの説明

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;
}