😄
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はこのようになります。
最後に
間違っていることやライブラリなどをご存じの方、コメントに書いていただけると幸いです。
よろしくお願いいたします。
Discussion