react-notifications-component همه چی تمام!

اعلان‌ها یکی از مهمترین قسمت‌های هر برنامه کاربردی هستند. شاید برای شما هم پیش‌آمده باشد که بعد از انجام یک فرآیند، بخواهید پیامی را به منظور اطلاع‌رسانی از وضعیت آن فرآیند به کاربر نشان دهید؛ یکی از بهترین روش‌ها برای کار استفاده از اعلان میباشد. در این مقاله ، نگاهی به انتشار نسخه جدید react-notifications-component (v2.2.4) کردیم. ری‌اکت کامپوننتی که یک سیستم اطلاع‌رسانی را در اختیار شما قرار می دهد و باعث صرفه جویی در وقت و تلاش برای ساختن آن می شود. همچنین در انتهای این مقاله می خواهم تجربه اجرای این سیستم اطلاع‌رسانی قابل اعتماد و خوب را بکار گیریم.

چرا react-notifications-component ؟

• پشتیبانی از قابلیت لمسی
• اعلان‌های ریسپانسیو
• انواع اطلاع‌رسانی استاندارد
• انواع اطلاع‌رسانی سفارشی
• محتوای اعلان سفارشی
• قابل رد کردن (لمس ، کلیک ، زمان‌بندی)
• کتابخانه کم حجم
• آسان برای استفاده
• انیمیشن‌های زیبا

نصب کتابخانه

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