はじめに
ReactでjQueryで書かれたコードを書き直す半写経をしているのですが、プラグイン使っているものはどうしようかと考え、たまたま目についたfancybox的なライブラリはないか探してみました。
条件
とりあえず
- jQuery無しで
- 画像をクリックしたらモーダルで拡大画像が表示
- 商用含めて無料で利用できるもの
- gitHubである程度(100位は）starが付いているもの
で探してみました。
ちなみにReact-Bootstrapでは
カルーセルはあったのですが、fancybox/lightbox的なものはなかったようです。
（モーダルに少し手を加えれば済みそうな気もしますが）
material-uiもざっと見て見ましたが、そのままな機能はありませんでした。
検索結果
react fancybox や react lightbox などのキーワードでgoogle or github検索して
今回はReact Imagesを試すことにしました。
こちらのライブラリは検索時点でStarが347で見つけたライブラリの中では１番多かったのですが
本家に比べると（3000~4000）だいぶ少なく、やや不安。
次点はReact Image Lightboxが49
どちらもここ数ヶ月いないにcommitもあるようなのでStarが多い方にしました。
ライセンスも
License
React Images is free to use for personal and commercial projects under the MIT license.
Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.
問題なさそう。
インストール
npm install react-images --save
その後はサンプルを見ながら
import Lightbox from 'react-images';
してコードを書くだけです。
ただしライブラリトップページやREADME.mdのexampleでなく、リポジトリのexamplesのコードを見た方がわかりやすいと思います。
サンプルコード
こちら （React Images Githubリポジトリ）
アニメーション・演出
実装終わってから気がついたのですが、フェードイン/アウトなどのアニメーション効果のオプションがありませんでした。どうもthemaという引数にCSSを渡して自分で実装するようです。ちょっと手間がかかりそうです。
const theme = {
// container
container: { background: 'rgba(255, 255, 255, 0.9)' },
// arrows
arrow: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
fill: '#222',
opacity: 0.6,
transition: 'opacity 200ms',
':hover': {
opacity: 1,
},
},
最後に
作業しながら思ったことは、当たり前なのですがReactに移行しはじめてからこういうことに気がついても遅いということで、「まえ別のサイトでやってた、画像がクリックすると拡大表示されて、左右の矢印で切り替えられるやつ」と頼まれて「Reactなので実装に時間がかかります」とか言えないですし、作って見たら微妙に使い勝手が違ったなんてこともありそうです。そもそも１から検索し直すのも数が数なら面倒です。
実際にjQueryから移行した方はプラグインで実現していた機能はどうされているのでしょうね？
はじめ、jQueryの主要プラグインとReact向けライブラリの比較をしているようなサイトがあると甘い期待をしていたのですが。
検索してみると思っていたほどには情報がないので、１から書いているのでしょうか。
Reactを選んだ時点でプラグインの組み合わせだけでやりくりするようなことを卒業すべきなのかもしれませんが
Component化という観点からだと極力１から書かずに済ませようとするのも正しいようにも思えます。
この機能はmaterial-ui、この機能はreact-bootstrap、こっちはjQueryのプラグインとか違和感しかない。
とかくjQueryをディスりがちですが、想像以上にjQueryにはお世話になっていたのだなという月並みな感想文になってしまいました。