react-hot-toastを使ってトーストを簡単に実装する

はじめに

いま丁度トーストの実装を行ったのでついでにシェアさせていただきます！！

個人開発第一弾のスタート時点で知ってたかったライブラリの私的上位に入るライブラリです。

コピーボタン押した時に画面上や下にピョッと出てきてササっと消える小さな画面みたいなやつをトーストといいます。

ライブラリ使うと死ぬほど簡単に実装できるのでやり方をご紹介します！！

react-hot-toast

公式サイトかわいいです。

使い方

簡単なのでサクッと行きます。

インストール

ライブラリなのでまずはインストールします。

npm i react-hot-toast

ちなみにインストールするときのコマンドはいつも私はnpmのサイト見てます。

コピーできるのでありがたくそのまま使ってます。

インポート

使いたいファイルでインポートします。

import toast, { Toaster } from "react-hot-toast";

インポートしているtoastは出力したいテキストを設定するのに使用し、Toastはコンポーネントです。

出力したい文字を設定する

今回クリップボードに保存したい処理があったのですが、コピーしたら「クリップボードに保存しました」と出力したいとします。

<button
            className="bg-slate-800 text-white px-3 pb-2 pt-1 ml-2 rounded-md"
            onClick={async () => {
              await navigator.clipboard.writeText(url);
              toast.success("クリップボードに保存しました");
            }}
          >
     copy
</button>

今回はトーストの種類にsuccessを使用しましたが、Errorやカスタマイズできるものも用意されています。

公式サイト見たらわかりやすく書いてます。

表示する

<Toast />とタグ埋め込むだけです。

return (
    <div className="flex justify-center items-center pt-10">
      <Toaster position="top-right" />
      <table className="table-fixed mb-10">
・・・省略

Propsで位置を指定できます。デフォルトはtop-centerですが、上下にそれぞれ左右中央設定が可能です。

今回右上に設定してみましたが、画面上の中央でしたら<Toast />これだけでOKです。

これだけでtoast("～～～～")の処理が実行されたタイミングで出現します！

おわりに

とっても簡単ではないですか？？

こだわりたい方はガッツリカスタマイズも出来るみたいです🎵

何かしらの処理に成功した、失敗したの表示をアラートではなくトーストにすると少しいい感じになる気がしますし(語彙力)、参考になりましたらぜひ使ってみてください！