I am currently using React-Toastify version 7.0.3 and have upgraded to 9.0.3. But with the updated version I am unable to render any notifcations as all.
Steps I did:
- yarn add react-toastify@9.0.3
- Changed Notification file
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const ReactToastify = require("react-toastify");
/**
*
* @param {severity, title, message} params
*/
export const toastnotify = (params) => {
switch (params.severity) {
case "success":
toast.success(params.message,
{
position: "top-right",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
break;
case "critical":
toast.error(params.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
break;
case "warning":
toast.warn(params.message, {
position: "top-right",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
break;
default: toast(params.message);
break;
}
};
export const ToastNotificationsContainer = (props) => {
return (
<ToastContainer
position="top-right"
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light" />);
};
export const NotificationContainer = (props) => {
return (<ReactToastify.ToastContainer
hideProgressBar={true}
autoClose={3000}
closeOnClick={true}
closeButton={false}
newestOnTop={true}
position="top-right"
toastClassName="toast-notification-wrap" />);
};
- In App.js,
import { NotificationContainer } from "./shared/Notifications/notifications";
render() {
return (
<Fragment>
<AppHeader />
<NotificationContainer/>
<AppSidebar>
</AppSidebar>
<AppFooter />
</Fragment>
);
}
- While trying to use the notification,
import { toastnotify } from "../../shared/Notifications/notifications";
//Inside function
toastnotify({ severity: "critical", title: "Unable to fetch log details" })
I have followed the documentation, but not sure what went wrong. The only difference between the code base is the notifcation.js. The 7.0.3 's notifcations.js file had
import { Notification } from '@scuf/common';
import './notifications.scss';
import 'react-toastify/dist/ReactToastify.css';
const ReactToastify = require('react-toastify');
/**
*
* @param {severity, title, message} params
*/
export const toastnotify = (params) => {
ReactToastify.toast(
<Notification
hasIcon={true}
className="toast-notification"
severity={params.severity}
title={params.title}
>
{params.message || ""}
</Notification>
)
}
export const NotificationContainer = (props) => {
return(
<ReactToastify.ToastContainer
hideProgressBar={true}
autoClose={12000}
closeOnClick={true}
closeButton={false}
newestOnTop={true}
position="bottom-right"
toastClassName="toast-notification-wrap"
/>
)
}
Please do let me know if I have missed a step in betwen or the modification is incorrect?
