今まではものぐさで、画像クリックしたときに使われるライブラリを react-image-lightboxを簡単に導入できた、という理由で使っていたのだけど、色々動きが微妙だったので、PhotoSwipe に変更した。

• 画像のプリロード
• 大きな画像が読み込まれるまでは小さな画像でレンダリング
• キーボード操作
• クリックでズーム
• スマフォ対応
• サムネイルからシュッとギャラリーが立ち上がる
• 変な挙動を(ほぼ)しない

あたりが簡単にできるようになって満足だ。PhotoSwipe は、作者の嗜好でコード1行で導入、という感じで簡単に使えるようになってはいない(例えば画像のwidth/heightを要求するので、自前で取得する必要があるなど)し、 作者が必要と思う機能だけしっかり入れている(そのためここ2年は更新がない)のだけど、そのこだわりが実装にも反映されているのか、素早く動作する。JS のソースコードは読みにくいけどね。

また react-photoswipe というライブラリもあるのだけど、メンテナンスされておらず、最近の React だと warning が出るので、自分で簡単なラッパを書いた (例: Create React wrapper for PhotoSwipe ) ほうが楽に使える気がする。TS 用の @types もあるしね。