چگونه هشدارهای سفارشی را در ری‌اکت با استفاده از React-Toastify ایجاد کنیم

پیام‌های اخطاری به‌صورت معمول در برنامه‌های وب برای نمایش هشدارها، خطاها، پیام‌های موفقیت و سایر اطلاعات ارزشمند استفاده می‌شوند.

پیام‌های هشدار اغلب در برنامه‌های وب برای نمایش اخطارها، خطاها، پیام‌های موفقیت و سایر اطلاعات ارزشمند استفاده می‌شوند.

چند بسته و چارچوب محبوب برای ساخت پیام‌های هشدار در React وجود دارد. React-Toastify یک کتابخانه React است که به شما امکان می‌دهد اعلان‌ها و پیام‌های هشدار را به برنامه‌های خود اضافه کنید.

نصب React Toastify

برای نصب Toastify در پروژه React خود، این فرمان را در پوشه پروژه اجرا کنید:

npm install --save react-toastify

راه‌اندازی Toastify

برای استفاده از بسته Toastify، باید ToastContainer، روش toast، و فایل CSS همراه که توسط بسته ارائه می‌شود را وارد کنید.

ToastContainer داخل کامپوننت App تمام اعلان‌های توست ساخته‌شده را ذخیره می‌کند.

import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return(
    <div>
      <ToastContainer/>
    </div>
  );
}

می‌توانید از روش‌های toast برای ایجاد اعلان‌های توست در پروژه React خود استفاده کنید:

function App() {
  const notify = () => toast.success("Hello There!");

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer/>
    </div>
  );
}

کلیک بر روی دکمه‌ای که این کد تولید می‌کند، روش toast.success را فراخوانی می‌کند و رشته «Hello There!» را به آن می‌پاساند. این کار یک اعلان توست ایجاد می‌کند که پیام را روی صفحه نمایش می‌دهد، به این شکل:

توجه داشته باشید که انواع مختلفی از روش‌های toast وجود دارد که می‌توانید فراخوانی کنید، مانند toast.info()، toast.error()، toast.success() و toast.warning(). هر یک از این روش‌ها دارای استایل رنگی جزئی هستند تا نوع پیام را نشان دهند.

موقعیت‌یابی اعلان‌های Toast شما

به‌صورت پیش‌فرض، اعلان‌های toast از گوشه بالا‑راست صفحه وب برنامه ظاهر می‌شوند. می‌توانید این را با تنظیم ویژگی position در ToastContainer تغییر دهید. شش مقدار موقعیت موجود است: top‑right، top‑center، top‑left، bottom‑right، bottom‑center، و bottom‑left.

برای مثال:

function App() {
  const notify = () => toast.success("Hello There!");

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer position="top-left"/>
    </div>
  );
}

تنظیم ویژگی position در ToastContainer به top‑left تضمین می‌کند که تمام اعلان‌های toast از گوشه بالا‑چپ صفحه ظاهر شوند.

می‌توانید موقعیت پیش‌فرض را برای هر اعلان توست به‌صورت جداگانه با استفاده از ویژگی position در روش‌های toast تغییر دهید:

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>
  );
}

همچنین می‌توانید اعلان‌های Toast را با استفاده از ویژگی position در CSS موقعیت‌دهی کنید، اما ویژگی position در Toastify روش استاندارد برای این کار است.

مدیریت ویژگی autoClose در روش Toast و ToastContainer

می‌توانید زمان نمایش اعلان‌های toast را تغییر دهید. با استفاده از ویژگی autoClose می‌توانید مدت زمان باز بودن یک اعلان toast را کنترل کنید. می‌توانید زمان تاخیر را برای همه اعلان‌های toast و اعلان‌های خاص تنظیم کنید. ویژگی autoClose تنها مقادیر بولی false یا مدت زمان بر حسب میلی‌ثانیه را می‌پذیرد.

برای تغییر زمان تاخیر همه اعلان‌های toast، از ویژگی autoClose داخل المان ToastContainer استفاده کنید.

برای مثال:

function App() {
  const notify = () => toast.success("Hello There!");

  return(
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={5000}/>
    </div>
  );
}

با این تنظیمات، تمام اعلان‌های toast دقیقاً به مدت پنج ثانیه (۵۰۰۰ میلی‌ثانیه) نمایش داده می‌شوند.

با استفاده از ویژگی autoClose در هر روش toast می‌توانید زمان تاخیر را برای اعلان‌های توست خاص تنظیم کنید.

برای مثال:

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>
  );
}

برای جلوگیری از بسته شدن پیش‌فرض اعلان toast، می‌توانید ویژگی autoClose را روی false تنظیم کنید. می‌توانید با تنظیم ویژگی autoClose در ToastContainer روی false اطمینان حاصل کنید که کاربر باید به‌صورت دستی هر اعلان toast را ببندد.

برای مثال:

function App() {
  const notify = () => toast.info("Hello There!");

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer autoClose={false} />
    </div>
  );
}

تنظیم ویژگی autoClose در روش‌های toast جداگانه روی false نیز تضمین می‌کند که این اعلان‌های خاص به‌صورت پیش‌فرض بسته نشوند.

نمایش اعلان‌های غیرمتنی با Toastify

می‌توانید رشته‌ها، کامپوننت‌های React و اعداد را به‌عنوان پیام‌های اعلان هنگام کار با toast نمایش دهید. برای نمایش یک کامپوننت React به‌عنوان اعلان toast، کامپوننت را ایجاد کرده و با استفاده از یک روش toast رندر می‌کنید.

برای مثال:

function Message({toastProps, closeToast}) {
  return (
    <div>
     <p>Welcome {toastProps.position}</p>
     <button onClick={closeToast}></button>
    </div>
   )
}

export default Message;

این بلوک کد یک کامپوننت به نام Message ایجاد می‌کند. هنگام رندر کردن یک کامپوننت به‌عنوان اعلان، toast ویژگی‌های toastProps و closeToast را به کامپوننت شما اضافه می‌کند. ویژگی closeToast یک تابع است که می‌توانید برای بستن اعلان استفاده کنید. ویژگی toastProps یک شیء است که جزئیاتی درباره اعلان toast شامل موقعیت، نوع و سایر ویژگی‌ها را نگه می‌دارد.

کامپوننت Message را وارد کنید، سپس آن را به تابع toast() پاس دهید تا به‌عنوان اعلان toast رندر شود:

import { ToastContainer, toast } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import Message from "./components/Message";

function App() {
  const msg = () => toast();

  return (
    <div>
      <button onClick={msg}>Welcome</button>
      <ToastContainer />
    </div>
  );
}

کلیک بر روی دکمه باعث می‌شود یک اعلان شامل یک سؤال و دو دکمه روی صفحه شما نمایش داده شود.

استایل‌دهی به اعلان‌های Toast

لازم نیست از استایل پیش‌فرض برای اعلان‌های toast خود استفاده کنید. می‌توانید آنها را طوری سفارشی کنید که با تم یا الگوی طراحی دلخواه شما که مناسب برنامه وب شماست، هماهنگ باشد.

برای استایل دادن به اعلان toast، یک 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 به اعلان خود، می‌توانید toast notification را در فایل CSS به دلخواه خود استایل کنید:

.toast-message {
  background-color: #000000;
  color: #FFFFFF;
  font-size: 20px;
  padding: 1rem 0.5rem;
}

در نتیجه استایل سفارشی بالا، اعلان به این شکل نمایش داده می‌شود:

اعلان‌های Toast برای برنامه وب شما

حالا می‌توانید هشدارهای سفارشی در React با استفاده از بسته React-Toastify و متدهای موجود ایجاد کنید. با استایل‌دهی به این هشدارها/اعلان‌های سفارشی به دلخواه خود، می‌توانید تجربه کاربری برنامه وب خود را بهبود بخشید.

React-Toastify روش سریع و مؤثری برای افزودن هشدارهای سفارشی به پروژه React شما بدون دردسر ارائه می‌دهد.

منبع مقاله