2022年9月4日JavaScriptツイートシェアはてブ送るPocket前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。トーストは代表的なポータルの応用例です。今回はポータルとContextを利用してトーストを実装する方法について紹介します。Contextの概要については【React】useContexでContextを参照する手順で紹介しています。);};Contextを利用したトーストの表示・非表示の制御方法Contextを利用したトースト表示・非表示のアプローチは以下の通りです。ProviderのローカルState(visible)を利用してトーストの表示を制御するvisibleをPropsとして受け取るトーストコンポーネントを作成トーストコンポーネントはvisibleの真偽値に応じて表示状態を変えるvisibleをfalseにする関数(hideToast)と、trueにする関数(showToast)を用意するshowToastをContextに渡すコンポーネントがContextから受け取ったshowToastを実行することでトーストが表示されるコードは以下の通りです。今回はEmotionを利用して実装しています。TypeScriptの環境にインストールする手順で紹介しています。});上記の例では『表示』ボタンを押すとshowToastが実行されるためvisibleがtrueになります。加えてmessageに文字列がセットされます。その結果、visibleの真偽値によって表示制御をしているトーストコンポーネントが可視化されます。トーストコンポーネントは表示から5秒後、hideToastを遅延実行するため、自動で非表示になります。この時点で以下のような画面が作成できます。メッセージに内容によってトーストの背景色を変更したい場合トーストの種類を複数用意したい場合のアプローチは以下の通りです。});『通常表示』を押した場合は以下のようになります。『エラー表示』を押した場合は以下のようになります。以下のような仕様を満たすトーストの実装例を紹介します。タイムアウト識別子を保存。});『通常表示』を押した場合は以下のようになります。『エラー表示』を押した場合は以下のようになります。さいごにTwitter(@nishina555)やってます。hooksでToastを実装するためにRECOMMENDJavaScriptReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。