React x PDF・canvas周りのライブラリ調査

概要

Reactを利用している環境で、PDF上のテキストをハイライトしたり領域にイベントを設定したりする場合に、ReactからPDFを扱うライブラリとしてどのようなものがあるか調査する。

要件

• PDFは文字情報を失っているケースもある (スキャンされた画像をPDF化したものなど)
• PDFは表示のみで作成はしなくて良い(ビューアー)、画像ビューアーでも良いかも
• zoom in/out、ページ送りなどのコントローラが内包されている、もしくは付け加えやすいAPIがある
• JSX上で宣言的に書ける方法がとれると嬉しい
• tsの型があると嬉しい

openbaseを見てみる。
https://openbase.com/categories/js/best-react-pdf-viewer-libraries

下記2つが良さそうだった。
どちらもPDF.jsを内部的に利用している。

• react-pdf
  無料、コントローラは自分で作る必要がある
  型は外部コミュティが作成したものが存在する
• react-pdf-viewer
  有料($199)、ドキュメントが豊富でカスタマイズ可能なコントローラも用意されている
  型はビルトイン

テキストハイライトもサポートしているが、テキスト情報がない場合は厳しそう。
(マッチするtextにハイライトを付ける方式)

PDF上にcanvasで作成したハイライトやイベントを設定するレイヤーを載せる必要がありそう。

canvasについても宣言的に書けると嬉しい。
openbaseを見てみる。
https://openbase.com/categories/js/highest-rated-react-canvas-libraries

上位でも1年以上コミットされていないものがあるため、主要なものをnpm trendsで見てみる。
https://www.npmtrends.com/react-canvas-vs-react-canvas-draw-vs-react-konva-vs-react-art

下記2つが良さそう。

• react-konoba
  ドキュメントもあって、日本語記事も多い印象
  イベントも設定できる。
  型はビルトイン
• react-art
  reactのモノレポに含まれている。
  型はない