การแจ้งเตือน Popup ด้วย React Toastify ใน React

ในบทความนี้ เราจะมาดูวิธีการใช้งาน react-toastify ในการสร้างการแจ้งเตือนแบบ popup โดยเราจะครอบคลุมการตั้งค่าเบื้องต้น การใช้ฟังก์ชัน showToast และการแสดงผล ToastContainer

1. การติดตั้ง React Toastify

npm install react-toastify

2. สร้างฟังก์ชัน showToast

หลังจากติดตั้งแล้ว เราจะสร้างฟังก์ชัน showToast ซึ่งใช้เรียก toast ในแบบต่างๆ ไม่ว่าจะเป็นแบบ success, error, warning, info หรือแม้แต่แบบ dark ที่มาพร้อมธีมมืดๆ สวยๆ ตามนี้

import { toast } from 'react-toastify';
import { injectStyle } from "react-toastify/dist/inject-style";

// สำหรับเรียกใช้ style ของ toastify เมื่ออยู่ใน window object
(() => {
  if (typeof window !== "undefined") injectStyle();
})();

type ToastType = 'success' | 'error' | 'warning' | 'info' | 'dark';

export function showToast(
  message: string,
  type: ToastType = 'success',
  autoCloseDuration: number = 5000
): void {
  const toastOptions = {
    position: "bottom-center" as const,
    autoClose: autoCloseDuration,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
  };

  switch (type) {
    case 'success':
      toast.success(message, toastOptions);
      break;
    case 'error':
      toast.error(message, toastOptions);
      break;
    case 'warning':
      toast.warning(message, toastOptions);
      break;
    case 'info':
      toast.info(message, toastOptions);
      break;
    case 'dark':
      toast.dark(message, toastOptions);
      break;
    default:
      console.warn(`Unknown toast type: ${type}`);
      break;
  }
}

ในฟังก์ชันนี้ เราสร้างตัวเลือกต่างๆ ใน toastOptions และใช้ switch case ในการเรียก toast แบบต่างๆ ตามประเภทที่ระบุ เช่น เมื่อ type เป็น 'success' จะเรียกใช้ toast.success พร้อมการตั้งค่าที่เราเตรียมไว้ใน toastOptions

3. แสดงผล ToastContainer

เราจำเป็นต้องใช้ ToastContainer เพื่อให้ toast แต่ละตัวแสดงผลได้ โดยวางใน component หลักของแอป

import { ToastContainer } from "react-toastify";

export const MyApp = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <ToastContainer />
    </>
  );
};

ToastContainer จะทำหน้าที่เป็น container ที่รอรับการแจ้งเตือนจาก toast ที่เราเรียกจาก showToast ใน component ต่างๆ ของแอป

สรุป

การใช้ react-toastify ทำให้การแจ้งเตือนในแอป React เป็นเรื่องง่ายและดูดีได้ นอกจากนี้ยังมีความยืดหยุ่นสูง ไม่ว่าจะเป็นการตั้งค่าตำแหน่ง สี ธีม และประเภทการแจ้งเตือนต่างๆ