【TypeScript×React】React-Modalの使い方

React

Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。

前提環境

TypeScriptとReactはインストール済。

インストール

こちらのコマンドを、インストール先のディレクトリで実行。

npm install --save react-modal @types/react-modal

※このコマンドは、TypeScript用です。また、型定義ファイルも自動で生成してくれるものです。

コード

一旦、以下をコピペしてみてください。

開発者がJS版で出していた例を、TypeScript用に私の方でアレンジしました。

Modal.setAppElement(‘#app’)の「#app」部分は、自分のプロジェクトにあるHTML要素に変更してください。’body’とかでもOKです!

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

const customStyles = {
    content : {
        top                   : '50%',
        left                  : '50%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%',
        transform             : 'translate(-50%, -50%)'
      }
}

Modal.setAppElement('#app')

function ModalExample() {
    let subtitle;
    const [modalIsOpen,setIsOpen] = useState(false);

    function openModal() {
      setIsOpen(true);
    }
   
    function afterOpenModal() {
      subtitle.style.color = '#f00';
    }
   
    function closeModal(){
      setIsOpen(false);
    }

    return (
    <div>
        <button onClick={openModal}>Open Modal</button>
        <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
        >

        <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
        <button onClick={closeModal}>close</button>
        <div>I am a modal</div>
        <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
        </form>
        </Modal>
    </div>
    );
}

export default ModalExample;

完成例

こんなボタンができます↓

それをクリックすると、このようなモーダルが出ます。↓

あとは、ご自身で必要な形にアレンジするだけです!

タイトルとURLをコピーしました