(メモ)react-modal でモーダル表示

メモ

インストールと使い方

まずは下記をインストール。

$npm install react-modal

使いたいコンポーネントでimportして<Modal></Modal>で挟んだ中身を挟む
そしてModal.setAppElement("body")をモーダルを配置する箇所に記述。

・コンポーネントの中身

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

const customStyles = {
  content : {
//モーダルの中身
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    border                : 'none',
    padding               : '30px 120px',
    background            : 'white'

 },
//モーダルの外側の部分はoverlayを使用する
 overlay : {
  background:   'rgba(62, 62, 62, 0.75)'
 }
};

 //任意のアプリを設定する　create-react-appなら#root
Modal.setAppElement('body')

const Modal = () => {
  const [isShowModal, setIsShowModal] = useGlobal('isShowModal')
  function openModal() {
    setIsShowModal(true);
  }
  function closeModal() {
    setIsShowModal(false);
  }
  return (
    <Modal
      isOpen={isShowModal}
      //onAfterOpen={afterOpenModal}
      onRequestClose={closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <p>モーダルの中身です</p>
      <p className="" onClick={()=>{closeModal()}}>OK</p>
    </Modal>
  );
}

export default Modal

コンポーネントはこのような記述で、呼び出したいところに
<Modal />を呼び出す。

  const [isShowModal, setIsShowModal] = useGlobal('isShowModal')

グローバルステートを設定。
コンポーネントとその呼び出し先に同じ文章を記述
const [isShow〇〇 setIsShow〇〇] = useGlobal('isShow〇〇')が主流らしい、