Memo

メモ > 技術 > フレームワーク: Laravel10 > Reactを使う（モーダルの例）
Reactを使う（モーダルの例）

Laravel + React + TypeScriptでプロジェクトを作成すると、resources/js/Components/Modal.tsx に以下のコンポーネントが作成されている。
以下のようにすると、このコンポーネントを使ってモーダルを表示できる。

import React, { useState } from 'react';
import Modal from '@/Components/Modal';

//export default function Hello() {
const Hello: React.FC = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const openModal = () => {
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };

    return (
        <div className="min-h-screen flex items-center justify-center">
            <button
                onClick={openModal}
                className="bg-blue-500 text-white px-4 py-2 rounded"
            >
                Open Modal
            </button>

            <Modal show={isModalOpen} onClose={closeModal} maxWidth="md">
                <div className="p-6">
                    <h2 className="text-xl font-bold mb-4">Modal Title</h2>
                    <p className="mb-4">This is a sample modal content.</p>
                    <button
                        onClick={closeModal}
                        className="bg-red-500 text-white px-4 py-2 rounded"
                    >
                        Close
                    </button>
                </div>
            </Modal>
        </div>
    );
};

export default Hello;
Memo

Advertisement
