Help us understand the problem. What is going on with this article?

ReactでjQuery無しのfancybox/lightbox的なライブラリを試してみて

More than 3 years have passed since last update.

はじめに

ReactでjQueryで書かれたコードを書き直す半写経をしているのですが、プラグイン使っているものはどうしようかと考え、たまたま目についたfancybox的なライブラリはないか探してみました。

条件

とりあえず

  • jQuery無しで
  • 画像をクリックしたらモーダルで拡大画像が表示
  • 商用含めて無料で利用できるもの
  • gitHubである程度(100位は)starが付いているもの

で探してみました。

ちなみにReact-Bootstrapでは
カルーセルはあったのですが、fancybox/lightbox的なものはなかったようです。
(モーダルに少し手を加えれば済みそうな気もしますが)

material-uiもざっと見て見ましたが、そのままな機能はありませんでした。

検索結果

react fancyboxreact lightbox などのキーワードでgoogle or github検索して

今回はReact Imagesを試すことにしました。

こちらのライブラリは検索時点でStarが347で見つけたライブラリの中では1番多かったのですが

本家に比べると(3000~4000)だいぶ少なく、やや不安。

次点はReact Image Lightbox49

どちらもここ数ヶ月いないに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なので実装に時間がかかります」とか言えないですし、作って見たら微妙に使い勝手が違ったなんてこともありそうです。そもそも1から検索し直すのも数が数なら面倒です。

実際にjQueryから移行した方はプラグインで実現していた機能はどうされているのでしょうね?
はじめ、jQueryの主要プラグインとReact向けライブラリの比較をしているようなサイトがあると甘い期待をしていたのですが。
検索してみると思っていたほどには情報がないので、1から書いているのでしょうか。
Reactを選んだ時点でプラグインの組み合わせだけでやりくりするようなことを卒業すべきなのかもしれませんが
Component化という観点からだと極力1から書かずに済ませようとするのも正しいようにも思えます。

この機能はmaterial-ui、この機能はreact-bootstrap、こっちはjQueryのプラグインとか違和感しかない。

とかくjQueryをディスりがちですが、想像以上にjQueryにはお世話になっていたのだなという月並みな感想文になってしまいました。

staka810
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした