Zenn
✨

Next.js14で、React-Modalで作る簡単モーダル

2024/12/22に公開
Next.js
React
tech

手軽にモーダルを作りたい人向けに、React-Modalでの実装方法を紹介します。

React-Modalとは

React-Modalとは、React環境にモーダルを追加できるプラグインです。
今回はNext.jsで使う想定で、実装しようと思います。
バージョンは14です。

公式Github https://github.com/reactjs/react-modal

導入方法は下記で行います。

npm install react-modal

実装

モーダルは、場合によっては多用されることもあるので、コンポーネントとして、作るのがおすすめです。

components/CommonModal.tsx

import Image from "next/image"
import Modal from "react-modal"

interface CommonModalProps {
	isOpen: boolean
	img: string
	closeModal: () => void
}

export const CommonModal = ({ isOpen, img, closeModal }: CommonModalProps) => {
	return (
		<Modal
			isOpen={isOpen}
			onRequestClose={closeModal}
			className="modal"
			overlayClassName="overlay"
		>
			<button onClick={closeModal} className="modal-close" type="button">
				閉じる
			</button>
			<div className="modal-content">
				<Image src={img} width={800} height={600} alt="画像" />
			</div>
		</Modal>
	)
}

引数として送っているのが、モーダルが開いているかどうかの判定するbooleanのisOpen。そして、モーダルに表示する画像としてimg、そして、モーダルを閉じる関数として、CloseModalという関数を設定しています。

次にCSSの設定です。

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 95%;
  max-height: 95%;
  overflow: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;

    img {
    max-width: 1100px;
    width: 100%;
    height: auto;
  }
}

簡単に説明するとモーダルが中心に表示されるように設定するCSSやモーダル表示時に背景色を暗くする設定をしています。この辺りは自由にCSSを設定しても良いと思います。

最後に呼び出しをします。

"use client"
import React, { useState } from "react"
import { CommonModal } from "../components/ui/CommonModal"

const Modal = () => {
const [isOpen, setIsOpen] = useState(false)

const openModal = () => {
    setIsOpen(true)
}

const closeModal = () => {
    setIsOpen(false)
}

return (
    <div>
        <button onClick={openModal} type="button">
            モーダル呼び出し
        </button>
        <CommonModal
        　isOpen={isOpen}
        　closeModal={closeModal}
        　img={"画像パス}
        />
    </div>
)
}

export default Modal

あとは呼び出し元で、モーダルを表示する関数と、モーダルを閉じる関数を作り、Next.js14だと、
"use client"を使い、Client Componentとして動かしましょう。
するとモーダルが上手く表示されるはずです。

※閉じるボタンには×のアイコンを使用

複数呼び出す場合にはその数だけ関数や変数を作り、設定すれば問題ないです。

まとめ

導入すれば、関数や変数の設定とCSSの設定だけで、簡単にモーダルを作ることができるので、
すぐに形にしたい人にはおすすめのプラグインだと思います。
まだ載せたコードだとまだ最適化できない部分があるので、あくまで一例として確認してみてください。

Discussion