React Hooksを使って簡単にモーダルを実装する方法

Reactを使っていると、モーダルの実装が必要になることがあります。しかし、クラスコンポーネントで実装する場合は煩雑であったり、モーダルに関するロジックと表示に関するロジックが混在することがあります。そこで、React Hooksを使ってシンプルにモーダルを実装する方法を紹介します。

useStateを使ってモーダルの状態を管理する

まず、useStateを使ってモーダルの状態を管理します。以下のように、isModalOpenというstateを作成します。

import React, { useState } from 'react';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && <div>モーダルの中身</div>}
    </div>
  );
}

上記のコードでは、Open Modalボタンがクリックされた時に、isModalOpenのstateをtrueに変更しています。そして、isModalOpenがtrueの場合に、モーダルの中身を表示するようにしています。

useCallbackを使って、モーダルを閉じる関数を作成する

次に、モーダルを閉じるための関数を作成します。ここでは、useCallbackを使って関数を定義しています。

import React, { useState, useCallback } from 'react';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const closeModal = useCallback(() => {
    setIsModalOpen(false);
  }, []);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && (
        <div>
          <div>モーダルの中身</div>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      )}
    </div>
  );
}

上記のコードでは、closeModalという関数をuseCallbackで定義しています。closeModalは、setIsModalOpenを使ってisModalOpenのstateをfalseに変更するようになっています。そして、モーダルの中身の下に、Close Modalボタンを追加しています。Close Modalボタンがクリックされた時には、closeModalが呼ばれて、モーダルが閉じられます。

useEffectを使って、モーダルが開いた時にスクロールを禁止する

最後に、useEffectを使って、モーダルが開いた時にスクロールを禁止するようにします。

import React, { useState, useCallback, useEffect } from
```javascript
function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const closeModal = useCallback(() => {
    setIsModalOpen(false);
  }, []);

  useEffect(() => {
    if (isModalOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
  }, [isModalOpen]);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && (
        <div>
          <div>モーダルの中身</div>
          <button onClick={closeModal}>Close Modal</button>
        </div>
      )}
    </div>
  );
}

上記のコードでは、useEffectを使って、モーダルが開いた時にdocument.body.style.overflowを’hidden’に設定して、スクロールを禁止しています。また、モーダルが閉じた時には、’unset’に設定して、スクロールを許可するようにしています。

以上が、React Hooksを使ったシンプルなモーダルの実装方法です。クラスコンポーネントで実装する場合に比べ、シンプルかつ分かりやすく、メンテナンス性も高いと思います。是非、参考にしてみてください。