🔧

react-photoswipe-gallaryでlightboxをカスタマイズ

2023/06/13に公開

Reactでlightbox（画像を表示する便利モーダルみたいなやつ）を表示するには色々な選択肢がありますが、PhotoSwipeのラッパーである

react-photoswipe-gallaryが便利でした。

スクショのように、ヘッダー部分のUIをカスタマイズすることもできます。

課題点

しかし上記のやり方だと、htmlコードを直接渡すことになるのでReactのうま味があまりありません。
JSX.Element を渡したい気持ちがありますね。

const MyGallery = () => (
  <Gallery>
    <Item
      content={<h1>Hi!</h1>}
      {/*...*/}
    />
  </Gallery>
)

このように、スライドコンテンツの中身にコンポーネントを渡すこともできるものの、lightboxなので中身は画像で十分で、UI側をいじりたいが簡単な方法が提供されていません。

解決方法

stackblitzに動くコードを載せているので参考にしてください。

重要な部分を抜粋すると

const uiElements: UIElementData[] = [
    {
      name: 'gallery-footer',
      className: 'pswp__gallery-footer',
      appendTo: 'wrapper',
      onInit: (element, pswp) => {
        const container = document.createElement('div');
        element.appendChild(container);
        ReactDOM.render(footer, container);
      },
    },
  ];

onInit() のライフサイクル内で、画像表示モーダルのラッパーの子要素にDOMを作ってあげて、そこに ReactDOM.render() で描画してあげています。

画像を選択して開いたモーダルにフッターが無事表示されました。

課題点

解決方法

Discussion