با هم کتابخانه  toast بررسی رو کنیم :

[css]$ npm install -S react-toasts[/css]
برای ایجاد کافی است که ابتدا به صورت بالا این کتابخانه وارد شود و در ادامه در نگ ToastsContainer  قید شود و ToastsStore حتما برای مدیریت قید شود و یا :
[css]import{ToastContainer} from ‘react-toastify'[/css] 






به فایلی که می خواهیم پیغام داده شود اضافه می کنیم در فایل app نیز به روش زیر عمل کنید:





[css]import{ToastContainer} from ‘react-toastify'[/css]
[css]import "react-toastify/dist/ReactToastify.css";[/css]



حالا شما می توانید یکی از چهار تابغ toast  رو استفاده کنید success, info, warning, error و پیغام در جایکه فایل ToastContainer مشاهده کنید.


ToastContainer دارای شش جایگاه مختلف دارد :




    

  • TOP_RIGHT
    • 

  • TOP_LEFT
    • 

  • TOP_CENTER
    • 

  • BOTTOM_RIGHT
    • 

  • BOTTOM_LEFT
    • 

  • BOTTOM_CENTER.
    • 





و اگر تمایل داشته باشید که دارای یک background شفاف باشید می تونید از Attribute  مخصوص داخل تگ ToastContainer استفاده کنید :


{ToastContainer.POSITION.TOP_LEFT}
lightBackground




در نهایت اگر در استفاده از این کتابخانه با مشکلی برخورد کردین خوشحال میشم بتونم کمکی کنم.