After updating from React-Toastify version 7.0.3 to 9.0.3, I encountered an issue where notifications are not rendering at all.
Here are the steps I followed:
- yarn add [email protected]
- Modified 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>
);
}
- When attempting to use the notification,
import { toastnotify } from "../../shared/Notifications/notifications";
//Inside function
toastnotify({ severity: "critical", title: "Unable to fetch log details" })
I have carefully followed the documentation but cannot pinpoint what went wrong. The main difference between the code bases is in the notification.js files of versions 7.0.3 and 9.0.3.
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"
/>
)
}
If you notice any missing steps or incorrect modifications, please let me know.