Overview

このパッケージは、Lightbox を実装できる軽量ライブラリ[email protected]をベースに React でも呼び出せるように書き直したものです。typescript にも対応しています。

Install

• npm

  npm install luminous-element

• yarn

  yarn add luminous-element

Usage

LegacyLuminous

オリジナル同様に、LegacyLuminousとLegacyLuminousGalleryをインポートして使うことができます。ただし、インラインスクリプトは利用できなくなっています（ビルドツールをwebpackからviteに変更したため）。

インポートします。

import { LegacyLuminous, LegacyLuminousGallery } from "luminous-element";

単独の画像で使いたい場合

new LegacyLuminous(document.querySelector(".simple-demo"));`

ギャラリを使いたい場合

new LegacyLuminousGallery(document.querySelectorAll(".gallery-demo"));

詳しくは、luminous-lightbox の READMEか有志の解説ページを見るとよいでしょう。

LuminousElement

LuminousElementをインポートすることで、Reactでも呼び出すことができます。

インポートします。

import { LuminousElement } from "luminous-element";

どこでもいいので JSX に挿入します。luminous-lightboxと同様に、セレクタに一致する要素から Lightbox を生成します。

return (
  <>
    <LuminousElement selectors=".simple-demo" />
        <a
          className="simple-demo zoom-in"
          href="https://assets.imgix.net/unsplash/pretty2.jpg?w=1600"
        >
          <img
            src="https://assets.imgix.net/unsplash/pretty2.jpg?w=400"
            alt="Mountainous landscape"
          />
        </a>
  ...
  </>
)

ギャラリを使いたい場合

  <LuminousElement gallery selectors=".gallery-demo" />