Reactで変更部分をハイライトする

Reactで変更部分をハイライトする

GithubやZennのような変更部分、削除部分をハイライトするコンポーネントをReactで作ったのでメモする

ライブラリはjsdiffを使用します。
クライアント側で差分比較してレンダリングを行える
変更前文字列と変更後文字列を渡すだけのとても簡単な使用方法、そこまでカスタムすることがないと思ったので採用しました。

インストール

npm install diff --save

import { diffChars } from "diff";

const oldContent = `向むこうの神かみさま。私の義。
たんだんだんだ。中ではこを旅たび聞こえないや、いましたかラ。`;
const newContent = `向むこうの神かみさま。
たんだんだんだ。中ではこを旅たび聞こえないや、いましたかラ。こんにちは`

const Component = () => {
  const diff = diffChars(oldContent, newContent);
  return (
    <div className="container h-96 overflow-y-scroll whitespace-pre-wrap rounded border border-gray-200 px-2.5 py-2 text-sm text-gray-700 lg:text-base xl:h-[36rem]">   
      {diff.map((part, index) => (
      <span
        key={index}
        className={cn(
        part.added && "text-green-500",
        part.removed && "text-red-500 line-through",
        )}
        >
        {part.value}
      </span>
      ))}
    </div>
  )
}

変更した行を表示したい場合、diffLinesを使用する

diffにはこのようなオブジェクトが入っています

[
  {
      "count": 11,
      "value": "向むこうの神かみさま。"
  },
  {
      "count": 4,
      "removed": true,
      "value": "私の義。"
  },
  {
      "count": 31,
      "value": "\nたんだんだんだ。中ではこを旅たび聞こえないや、いましたかラ。"
  },
  {
      "count": 5,
      "added": true,
      "value": "こんにちは"
  }
]

UIはこのようになります。

最後に

間違っていることやライブラリなどをご存じの方、コメントに書いていただけると幸いです。
よろしくお願いいたします。