React アプリケーションでの React-Bootstrap モーダルの使用

1. React の Bootstrap 3 モーダル
2. React の Bootstrap 4＆5 モーダル

あなたはおそらく以前に法助動詞に出くわしたことがあります。これらはポップアップのように見え、特定のボタンをクリックするか、他のアクションを実行すると表示されます。独自の React アプリケーションでそれらをフィーチャーすることもできます。

モーダルを正しく使用すると、React アプリのユーザーエクスペリエンスを向上させることができます。

これらは、Web サイトの重要な機能にユーザーの注意を引き付けたり、入力を取得したりするのに非常に効果的です。たとえば、ユーザーが誤ってクリックして重要な UI アイテムを削除した場合は、モーダルを使用して、ユーザーが選択できるかどうかを確認できます。

React アプリを開発する場合、通常の JavaScript、HTML、および CSS を使用してカスタムの Modal コンポーネントを作成できます。ただし、カスタムソリューションが必要であることが確実でない限り、Bootstrap などの UI ライブラリのモーダルを使用することで多くの時間を節約できます。

React の Bootstrap 3 モーダル

React-Bootstrap は、React 用に調整された人気のあるライブラリのバージョンです。オリジナルの Bootstrap バージョン 3 に期待するのと同じ機能と機能を備えたカスタム React コンポーネントを提供します。

React-Bootstrap のようなライブラリを使用すると、一般的な UI 要素を最初から作成せずに使用できます。

このライブラリからインポートされた Modal コンポーネントは、必要なすべての機能を提供します。インポートすると、React のパターンに逆らって DOM を直接変更する必要がなくなります。

シェルを開いて次のコマンドを入力すると、インストールできます。

npm install react-bootstrap

react-bootstrap ライブラリの最も優れている点は、個々のコンポーネントを個別にインポートできることです。このようにして、パッケージサイズを最小化し、アプリの読み込みを高速化できます。

React-Bootstrap ライブラリからモーダルを含める最も簡単な方法は、アプリケーションの上部でインポートステートメントを宣言することです。

import Modal from 'react-bootstrap/Modal';

React-Bootstrap ライブラリの唯一の欠点は、Bootstrap3 のみをサポートすることです。

React-Bootstrap ライブラリを使用すると、Modal コンポーネントの外観と機能を自由にカスタマイズできます。いくつか例を挙げると、アニメーション、ブラウザ内の位置、サイズを調整できます。公式ガイドを読んで、React-Bootstrap モーダルの詳細を参照します。

React の Bootstrap 4＆5 モーダル

Bootstrap 4 以降のバージョン 5 を使用する場合は、react-strap パッケージを使用するのが最善の方法です。このパッケージにはスタイルがないため、コアの bootstrap パッケージをインストールして、CSS ファイルをインポートする必要があります。

react-strap パッケージをインストールするには、コマンドラインを開いて次のコードを入力する必要があります。

npm install reactstrap

インストールが完了したら、Modal コンポーネントをアプリケーションにインポートできます。次に例を示します。

import React from 'react';
import { Modal } from 'reactstrap';

Modal コンポーネントは、React 専用に構築されています。isOpen、toggle、size などの props を使用して、その動作をカスタマイズできます。フェードアニメーションを有効または無効にすることもできます。

react-strap パッケージを使用すると、コンポーネントの動作を自由にカスタマイズできます。自由に使えるオプションの詳細については、公式の react-strap ドキュメントを参照します。