Reactでポップアップを実装する方法

Reactでポップアップを実装する方法

Reactでポップアップを実装する方法を紹介します。
ここでは、Reactの状態管理を使ったシンプルなポップアップの例を示します。

1. 基本的なポップアップコンポーネント

まず、ポップアップコンポーネントを作成します。

import React from 'react';

type PopupProps = {
  message: string;
  onClose: () => void;
};

const Popup: React.FC<PopupProps> = ({ message, onClose }) => {
  return (
    <div className="popup">
      <div className="popup-content">
        <span className="close-btn" onClick={onClose}>&times;</span>
        <p>{message}</p>
      </div>
    </div>
  );
};

export default Popup;

2. ポップアップをトリガーする親コンポーネント

次に、ポップアップを表示・非表示にする親コンポーネントを作成します。

import React, { useState } from 'react';
import Popup from './Popup';

const App: React.FC = () => {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const togglePopup = () => {
    setIsPopupOpen(!isPopupOpen);
  };

  return (
    <div className="App">
      <button onClick={togglePopup}>ポップアップを表示</button>
      {isPopupOpen && <Popup message="これはポップアップメッセージです" onClose={togglePopup} />}
    </div>
  );
};

export default App;

このコードを使用すると、Reactアプリケーション内でシンプルなポップアップを表示することができます。
ポップアップはボタンをクリックすると表示され、閉じるボタンをクリックすると非表示になります。