https://virgool.io/feed/@muhshahabipour fa 2026-06-17 09:22:07 https://files.virgool.io/upload/users/10717/avatar/OxP9K0.png?height=120&width=120 https://virgool.io/@muhshahabipour https://virgool.io/iran-react-community/react-notifications-component-cobss6e5kclf اعلان‌ها یکی از مهمترین قسمت‌های هر برنامه کاربردی هستند. شاید برای شما هم پیش‌آمده باشد که بعد از انجام یک فرآیند، بخواهید پیامی را به منظور اطلاع‌رسانی از وضعیت آن فرآیند به کاربر نشان دهید؛ یکی از بهترین روش‌ها برای کار استفاده از اعلان میباشد. در این مقاله ، نگاهی به انتشار نسخه جدید react-notifications-component (v2.2.4) کردیم. ری‌اکت کامپوننتی که یک سیستم اطلاع‌رسانی را در اختیار شما قرار می دهد و باعث صرفه جویی در وقت و تلاش برای ساختن آن می شود. همچنین در انتهای این مقاله می خواهم تجربه اجرای این سیستم اطلاع‌رسانی قابل اعتماد و خوب را بکار گیریم.چرا react-notifications-component ؟پشتیبانی از قابلیت لمسیاعلان‌های ریسپانسیوانواع اطلاع‌رسانی استانداردانواع اطلاع‌رسانی سفارشیمحتوای اعلان سفارشیقابل رد کردن (لمس ، کلیک ، زمان‌بندی)کتابخانه کم حجمآسان برای استفادهانیمیشن‌های زیبا نصب کتابخانهnpm install --save react-notifications-component animate.cssما برای انیمیشن نحوه ورود / خروج اعلان‌ها از animate.css استفاده می کنیم ، اما می توانید از هر کتابخانه انیمیشن که به صورت کلاس css تعریف شده است که ترجیح می دهید استفاده کنید.پیکربندی پایه‌ایدر حالی که این کتابخانه بسیار مملو از ویژگی هاست ، اما شما می‌توانید خیلی سریع مراحل تنظیم / پیکربندی را انجام دهید: https://gist.github.com/muhshahabipour/e1505a9c970e59b6bdbaa3095aabcd7d شما میتوانید یک بار این کامپوننت را تعریف کنید و بارها و بارها از آن در هرجایی استفاده کنید. بهتر است <ReactNotifications /> را در بالاترین سطح از برنامه‌تان اضافه کنید.برای نمایش اعلان‌ها نیاز است که ابتدا store را در هر کامپوننتی که میخواهید از اعلان استفاده کنید import کنید و بعد از آن از متد store.addNotification استفاده کنید. https://gist.github.com/muhshahabipour/577d60b52fc2a0caca51b1d9f2b2f6f4 در صفحات کوچک، شما شاهد full-width شدن اعلان هستید.تعداد زیادی اعلان وجود دارد که میتونن شامل یکی از تایپ‌های ‍success, warning, info, danger و یا default بشوند.شخصی‌سازی اعلان‌هااگر شما احتیاج به یک اعلان شخصی‌سازی شده دارید. در واقع خودتون میتونید اون رو به صورت یک کامپوننت ری‌اکت بسازید.Homepage.js https://gist.github.com/muhshahabipour/711971c7b1b47e8d7e59427b6ae4646a MyNotification.js https://gist.github.com/muhshahabipour/3263a34bd0c972a6fb92b484cb9162c9 جزئیات پیکربندی‌های بیشتر رو در مستندات میتوانید پیدا کنید.جمع‌بندیاگر برای برنامه ری‌اکت خود به یک سیستم اعلان نیاز دارید ، قطعاً باید اجزاء react-notifications-component را امتحان کنید! ویژگی‌های بسیاری وجود دارد که شامل سازگاری با برنامه‌های دسکتاپ/تلفن همراه، گزینه‌های انیمیشن، حرکات لمسی و طراحی واکنشگرا نیز میشود.حالا نمونه پیاده‌سازی شده: https://kutt.it/E2oDk4 منبع مقاله: https://alligator.io/react/react-notifications-component Muhammad Shahabipour Muhammad Shahabipour Sat, 21 Dec 2019 23:13:50 +0330