React でモーダルダイアログを表示する (react-modal)

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

// import ReactModal from 'react-modal';

<ReactModal
  isOpen={this.props.isOpen}
  onAfterOpen={this.handleOpen}
  onRequestClose={this.handleClose}
  style={this.customStyles}
  contentLabel="Settings"
>
  // ... フォームの内容などをここに記述 ...
</ReactModal>

import * as React from 'react';
import ReactModal from 'react-modal';

interface Props {
  /** このダイアログを表示するなら true */
  isOpen: boolean;
  /** このダイアログを閉じるときのコールバック */
  onClose?: () => void;
}

interface State {
  username: string;
}

export class SettingsDialog extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      username: ''
    };

    // 具体的に #root 要素などを指定した方がよい？
    ReactModal.setAppElement('body');
  }

  public render(): React.ReactNode {
    return <div>
      <ReactModal
        isOpen={this.props.isOpen}
        onAfterOpen={this.handleOpen}
        onRequestClose={this.handleClose}
        style={this.customStyles}
        contentLabel="Settings"
      >
        <form onSubmit={this.handleSubmit}>
          <label>ユーザー名
            <input type="text" autoFocus value={this.state.username}
              onChange={this.handleChangeUsername}></input>
          </label>
        </form>
      </ReactModal>
    </div>;
  }

  // フォームのサブミット時にダイアログを閉じる
  private handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    this.handleClose();
  }

  private handleChangeUsername = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({username: event.target.value})
  }

  // ダイアログが開いたときに呼び出される
  private handleOpen = () => {
    // ここで設定情報などを読み込む
  }

  // ダイアログ領域外のクリックや、ESCキーを押したときに呼び出される
  private handleClose = () => {
    // 親コンポーネントにダイアログを閉じてもらうためのコールバック通知
    this.props.onClose?.();
  }

  // スタイルのカスタマイズ
  private customStyles: ReactModal.Styles = {
    // ダイアログ内のスタイル（中央に表示）
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)'
    },
    // 親ウィンドウのスタイル（ちょっと暗くする）
    overlay: {
      background: 'rgba(0, 0, 0, 0.2)'
    }
  }
}

import * as React from 'react';
import {SettingsDialog} from './settingsDialog';

interface State {
  isDialogOpen: boolean;
}

export class App extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      isDialogOpen: false,
    };
  }

  public render(): React.ReactNode {
    return <div>
      <button onClick={this.openDialog}>設定</button>
      <SettingsDialog isOpen={this.state.isDialogOpen} onClose={this.closeDialog} />
    </div>;
  }

  // ダイアログを開く
  private openDialog = () => {
    this.setState({isDialogOpen: true});
  }

  // ダイアログからのコールバックでダイアログを閉じてあげる
  private closeDialog = () => {
    this.setState({isDialogOpen: false});
  }
}

<ReactModal
  isOpen={this.props.isOpen}
  onAfterOpen={this.handleOpen}
  onRequestClose={this.handleClose}
  ...>

private handleOpen = () => {
  // 設定情報を読み込む
  const name = localStorage.getItem('username') || '';
  this.setState({username: name});
}

private handleClose = () => {
  // 設定情報を保存
  localStorage.setItem('username', this.state.username);

  // 親コンポーネントにダイアログを閉じてもらうためのコールバック通知
  this.props.onClose?.();
}