TypeScript + React TailWindで作るシンプルなModalコンポーネント

$ npm install --save react-modal
$ yarn add react-modal

npm install --save @types/react-modal

import React, { useEffect, useState } from 'react';
import Modal from 'react-modal';

export default function AddBus(): JSX.Element {
  const [showModal, setShowModal] = useState<boolean>(false);

  // 削除の実行処理
  const deleteAction = async (docid: string) => {
    …
  };

  // 削除確認のモーダルの表示
  const handleOpenModal = () => {
    setShowModal(true);
  };

  // 削除確認のモーダルで削除ボタン押下時の処理
  const handleDeleteAction = () => {
    deleteAction();
    setShowModal(false);
  };

  // 削除確認のモーダルでキャンセルボタン押下時の処理
  const handleCloseModal = () => {
    setShowModal(false);
  };

  // モーダルを画面中央に表示する用のスタイル
  const customStyles = {
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
    },
  };

  // 削除モーダル
  const confirmModal = (
    <Modal
      style={customStyles}
      isOpen={showModal} >
      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
        <h3
          className="text-lg leading-6 font-medium text-gray-900"
          id="modal-title">
          削除しますか？
        </h3>
        <div className="mt-2">
          <p className="text-sm text-gray-500">
            削除するともとに戻せません。すでに登録されているユーザへの影響を確認して慎重に操作してください。
            <br />
            本当に削除しますか？
          </p>
        </div>
      </div>
      <div className="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button
          type="button"
          className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
          onClick={handleDeleteAction}>
          削除する
        </button>
        <button
          type="button"
          className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
          onClick={handleCloseModal}>
          削除しない
        </button>
      </div>
    </Modal>
  );

  return (
    <>
      …
      {confirmModal}
    </>
  );
}