React-Toastify を使用して React でカスタム アラートを作成する方法
アラート メッセージは、警告、エラー、成功メッセージ、その他の重要な情報を表示するために Web アプリでよく使用されます。
React でアラート メッセージを作成するための一般的なパッケージとフレームワークがいくつかあります。React-Toastify は、アプリケーションに通知と警告メッセージを追加できる React ライブラリです。
React Toastify のインストール
Toastify を React プロジェクトにインストールするには、プロジェクト ディレクトリで次のコマンドを実行します。
npm install --save react-toastify
Toastify の設定
Toastify パッケージを使用するには、パッケージによって提供されるToastContainer、toastメソッド、および付随する CSS ファイルをインポートする必要があります。
App コンポーネント内のToastContainerは、作成されたすべてのトースト通知を格納します。
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
function App() {
return(
<div>
<ToastContainer/>
</div>
);
}
トーストメソッドを使用して、React プロジェクトのトースト通知を作成できます。
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer/>
</div>
);
}
このコードが生成するボタンをクリックすると、toast.successメソッドが呼び出され、「Hello There!」文字列が渡されます。これにより、次のようにメッセージを画面に表示するトースト通知が作成されます。
toast.info()、toast.error()、toast.success( ) 、toast.warning ()など、呼び出すことができるトースト メソッドにはさまざまな種類があることに注意してください。これらの各メソッドには、メッセージの種類を反映する微妙な色のスタイルがあります。
トースト通知の配置
デフォルトでは、トースト通知は Web アプリの画面の右上からポップアップします。これは、 ToastContainerの position プロパティを設定することで変更できます。使用可能な位置の値は、右上、中央上部、左上、右下、中央下、左下の 6 つです。
例えば：
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
ToastContainerの position プロパティを左上に設定すると、すべてのトースト通知が画面の左上からポップアップ表示されます。
トーストメソッドの position プロパティを使用して、個々のトースト通知の既定の位置を変更できます。
function App() {
const notify = () => toast.success("Hello There!", {position: toast.POSITION.TOP_CENTER});
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-left"/>
</div>
);
}
CSS の position プロパティを使用して Toast 通知を配置することもできますが、Toastify の position prop はこれを行う標準的な方法です。
Toast メソッドと ToastContainer の autoClose Prop の処理
トースト通知の表示時間を変更できます。autoClose プロパティを使用して、トースト通知を開いたままにしておく時間を制御できます。すべてのトースト通知と個々のトースト通知の遅延時間を変更できます。autoClose propは、ブール値 false またはミリ秒単位の期間のみを受け入れます。
すべてのトースト通知の遅延時間を変更するには、 ToastContainer要素内でautoClose プロパティを使用します。
例えば：
function App() {
const notify = () => toast.success("Hello There!");
return(
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={5000}/>
</div>
);
}
上記の設定では、すべてのトースト通知が正確に 5 秒間 (5,000 ミリ秒) 表示されます。
各トーストメソッドのautoCloseプロパティを使用して、個々のトースト通知の遅延時間をカスタマイズできます。
例えば：
function App() {
const notifyOne = () => toast.info("Will close in 10 seconds", {autoClose: 10000});
const notifyTwo = () => toast.info("Will close in 15 seconds", {autoClose: 15000});
return (
<div>
<button onClick={notifyOne}>Notify One</button>
<button onClick={notifyTwo}>Notify Two</button>
<ToastContainer />
</div>
);
}
デフォルトでトースト通知が閉じないようにするには、autoClose プロパティをfalseに設定します。ToastContainerのautoCloseプロパティを falseに設定することで、ユーザーが各トースト通知を手動で閉じる必要があることを確認できます。
例えば：
function App() {
const notify = () => toast.info("Hello There!");
return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer autoClose={false} />
</div>
);
}
個々のトーストメソッドのautoClose プロパティをfalseに設定すると、それらの特定のトースト通知が既定で閉じられなくなります。
Toastify を使用した文字列以外の通知のレンダリング
トースト通知を操作するときに、文字列、反応コンポーネント、および数値を通知メッセージとしてレンダリングできます。React コンポーネントをトースト通知としてレンダリングするには、コンポーネントを作成し、トーストメソッドを使用してレンダリングします。
例えば：
function Message({toastProps, closeToast}) {
return (
<div>
<p>Welcome {toastProps.position}</p>
<button onClick={closeToast}></button>
</div>
)
}
export default Message;
このコード ブロックは、コンポーネントMessageを作成します。コンポーネントを通知としてレンダリングする場合、toast はtoastPropsとcloseToast props をコンポーネントに追加します。closeToast prop は、通知を閉じるために使用できる関数です。toastProps prop は、位置、タイプ、およびその他の特性を含むトースト通知に関する詳細を格納するプロパティを持つオブジェクトです。
Message コンポーネントをインポートして toast() 関数に渡し、トースト通知としてレンダリングします。
import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import Message from "./components/Message";
function App() {
const msg = () => toast(<Message />);
return (
<div>
<button onClick={msg}>Welcome</button>
<ToastContainer />
</div>
);
}
ボタンをクリックすると、質問と 2 つのボタンを含む通知が画面に表示されます。
トースト通知のスタイリング
トースト通知に既定のスタイルを使用する必要はありません。Web アプリケーションに適した目的のデザイン テーマやパターンに合わせてカスタマイズできます。
トースト通知のスタイルを設定するには、classNameを指定し、CSS ファイル内でカスタマイズを適用します。
例えば：
function App() {
const notify = () => toast.success("Hello There!", {className: "toast-message"});
return (
<div>
<button onClick={notify}>Notify</button>
<ToastContainer position="top-center" />
</div>
);
}
classNameを通知に添付すると、CSS ファイル内で好みに合わせてトースト通知のスタイルを設定できます。
.toast-message {
background-color: #000000;
color: #FFFFFF;
font-size: 20px;
padding: 1rem 0.5rem;
}
上記のカスタム スタイルの結果、通知は次のようになります。
Web アプリケーションのトースト通知
React-Toastify パッケージとその利用可能なメソッドを使用して、React でカスタム アラートを作成できるようになりました。これらのカスタム アラート/通知を好みに合わせてスタイリングすることで、Web アプリケーションのユーザー エクスペリエンスを向上させることができます。
React-Toastify は、手間をかけずに React プロジェクトにカスタム アラートを含めるための迅速かつ効果的な方法を提供します。
コメントを残す