اعلان‌ها یکی از مهمترین قسمت‌های هر برنامه کاربردی هستند. شاید برای شما هم پیش‌آمده باشد که بعد از انجام یک فرآیند، بخواهید پیامی را به منظور اطلاع‌رسانی از وضعیت آن فرآیند به کاربر نشان دهید؛ یکی از بهترین روش‌ها برای کار استفاده از اعلان میباشد. در این مقاله ، نگاهی به انتشار نسخه جدید react-notifications-component (v2.2.4) کردیم. ری‌اکت کامپوننتی که یک سیستم اطلاع‌رسانی را در اختیار شما قرار می دهد و باعث صرفه جویی در وقت و تلاش برای ساختن آن می شود. همچنین در انتهای این مقاله می خواهم تجربه اجرای این سیستم اطلاع‌رسانی قابل اعتماد و خوب را بکار گیریم.
npm install --save react-notifications-component animate.css
ما برای انیمیشن نحوه ورود / خروج اعلان‌ها از animate.css استفاده می کنیم ، اما می توانید از هر کتابخانه انیمیشن که به صورت کلاس css تعریف شده است که ترجیح می دهید استفاده کنید.
در حالی که این کتابخانه بسیار مملو از ویژگی هاست ، اما شما میتوانید خیلی سریع مراحل تنظیم / پیکربندی را انجام دهید:
شما میتوانید یک بار این کامپوننت را تعریف کنید و بارها و بارها از آن در هرجایی استفاده کنید. بهتر است <ReactNotifications /> را در بالاترین سطح از برنامه‌تان اضافه کنید.
برای نمایش اعلان‌ها نیاز است که ابتدا store را در هر کامپوننتی که میخواهید از اعلان استفاده کنید import کنید و بعد از آن از متد store.addNotification استفاده کنید.
در صفحات کوچک، شما شاهد full-width شدن اعلان هستید.
تعداد زیادی اعلان وجود دارد که میتونن شامل یکی از تایپ‌های success, warning, info, danger و یا default بشوند.
اگر شما احتیاج به یک اعلان شخصی‌سازی شده دارید. در واقع خودتون میتونید اون رو به صورت یک کامپوننت ری‌اکت بسازید.
Homepage.js
MyNotification.js
جزئیات پیکربندی‌های بیشتر رو در مستندات میتوانید پیدا کنید.
اگر برای برنامه ری‌اکت خود به یک سیستم اعلان نیاز دارید ، قطعاً باید اجزاء react-notifications-component را امتحان کنید! ویژگی‌های بسیاری وجود دارد که شامل سازگاری با برنامه‌های دسکتاپ/تلفن همراه، گزینه‌های انیمیشن، حرکات لمسی و طراحی واکنشگرا نیز میشود.
حالا نمونه پیاده‌سازی شده:
منبع مقاله: https://alligator.io/react/react-notifications-component
