いつも使っているReact-Toastify用のヘルパー関数

ちょっとしたことですが結構毎回使うので。

---

React-Toastifyでトーストを出す方法は2通りあり、それぞれ公式ドキュメントのこのページで紹介されています。

設定値を渡して、表示内容をToastContainerの場合は子コンポーネントとして、Toast Emitterの場合は第1引数に渡します。
アプリケーション内でトースト仕様が各使用箇所ごとに大きく変わることはあまりないので、いつも以下のようなトースト表示用関数を作成しています。

import { toast, ToastContent, ToastOptions, Slide, Id } from "react-toastify";


export const defaultToastOptions: ToastOptions = {
  position: "top-center",
  autoClose: 4000,
  hideProgressBar: true,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: undefined,
  theme: "colored",
  transition: Slide,
};

type ToastType = "success" | "error" | "info" | "warning" | "default";

/**
 * Display toast
 *
 * @param {ToastType} type
 * @param {ToastContent} content
 * @param {ToastOptions} [options=defaultToastOption]
 * @return {Id}
 */
export const showToast = (
  type: ToastType,
  content: ToastContent,
  options: Partial<ToastOptions> = {},
): Id => {
  const optionsToApply = { ...defaultToastOptions, ...options };

  switch (type) {
    case "success":
      return toast.success(content, optionsToApply);
    case "error":
      return toast.error(content, optionsToApply);
    case "info":
      return toast.info(content, optionsToApply);
    case "warning":
      return toast.warn(content, optionsToApply);
    case "default":
      return toast(content, optionsToApply);
    default:
      return toast(content, optionsToApply);
  }
};

使い方は以下の通りです

showToast("success" <p>Your post has been published!</p>);

書き味はToast Emitterと似ていますが、こちらは設定を上書きする必要がなければトーストのタイプと表示内容を渡すだけで完結します。

ちょっと便利じゃないですか?
もしよければ使ってみてください。