Bulma ＋ React でダイアログコンポーネントを作る

bulmaとreactでダイアログコンポーネントを作ってみる。

bulmaのインストール

まず bulmaをプロジェクトにインストールする必要があります。

npm install bulma

または

yarn add bulma

インポート

App.tsx などに以下のインポートを追加して、全コンポーネントで bulma で使えるようにする。

import 'bulma/css/bulma.css';

ダイアログコンポーネントの作成

モーダルダイアログを表すコンポーネントを作成します。このコンポーネントは、openとonCloseの2つのプロップを受け取り、ダイアログが開いているかどうかと、ダイアログが閉じられたときに実行される関数を制御します。

function ModalDialog({
  open,
  onClose,
  children,
}) {

  const handleClose = useCallback(
    () => {
      if (typeof onClose === 'function') 
        onClose()
    },
    [onClose],
  )

  return (
    <div className={`modal ${open === true ? 'is-active' : ''}`}>
      <div className="modal-background" onMouseDown={handleClose}></div>
      <div className="modal-content">
        <div className="box">
          {children}
        </div>
      </div>
      <button 
        onClick={handleClose}
        className="modal-close is-large" 
        aria-label="close"></button>
    </div>
  )
}

export default ModalDialog

呼び出し側の実装

最後に、ダイアログを開くためのボタンを含む親コンポーネントを作成します。

function App() {

  const [open, setOpen] = useState(false)

  const closeDialog = () => {
    setOpen(false)
  }
  
  return (
    <div>
      <button onClick={() => setOpen(true)}>ダイアログ表示</button>
      <ModalDialog open={open} onClose={closeDialog}>
        ダイアログの中身のコンテンツ
      </ModalDialog>
    </div>
  )
}

export default App

実行すると、こんな感じのモーダルダイアログが出る。