Trigger toast from outside React component - reactjs

Question

I am using PrimeReact's toast component, whose API looks like this:
function App() {
const toast = useRef(null);
useEffect(() => {
toast.current.show({
severity: 'info',
detail: 'Hellope'
});
});
return (
<div className='App'>
<Toast ref={toast} />
</div>
);
}
I would now like to call toast.current.show() from a non-React context. In particular, I have an http() utility function through which all HTTP calls are made. Whenever one fails, I would like to show a toast. What are clean/idiomatic ways to achieve this?

Answer 1

Initialize the toast on the window object.
useLayoutEffect(() => {
window.PrimeToast = toast.current || {};
}, []);
On your fetch or axios handler, use the above object on your error handler
const fakeUrl = "https://api.afakeurl.com/hello";
fetch(fakeUrl)
.then((res) => res.data)
.catch((err) => {
console.error("error fetching request", err);
if (window.PrimeToast) {
window.PrimeToast.show({
severity: "error",
summary: "Error calling https",
detail: "hello"
});
}
});
Updated Sandbox
Reference:
https://www.primefaces.org/primereact/toast/

Answer 2

I would create a toast context that would allow showing toasts
toast-context.js
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.css";
import { Toast } from "primereact/toast";
import { createContext, useContext, useRef } from "react";
// create context
const ToastContext = createContext(undefined);
// wrap context provider to add functionality
export const ToastContextProvider = ({ children }) => {
const toastRef = useRef(null);
const showToast = (options) => {
if (!toastRef.current) return;
toastRef.current.show(options);
};
return (
<ToastContext.Provider value={{ showToast }}>
<Toast ref={toastRef} />
<div>{children}</div>
</ToastContext.Provider>
);
};
export const useToastContext = () => {
const context = useContext(ToastContext);
if (!context) {
throw new Error(
"useToastContext have to be used within ToastContextProvider"
);
}
return context;
};
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { ToastContextProvider } from "./toast-context";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<ToastContextProvider>
<App />
</ToastContextProvider>
</StrictMode>
);
App.js
import { useToastContext } from "./toast-context";
export default function App() {
// use context to get the showToast function
const { showToast } = useToastContext();
const handleClick = () => {
http(showToast);
};
return (
<div className="App">
<button onClick={handleClick}>show toast</button>
</div>
);
}
// pass showToast callback to your http function
function http(showToast) {
showToast({
severity: "success",
summary: "Success Message",
detail: "Order submitted"
});
}
Codesanbox example: https://codesandbox.io/s/beautiful-cray-rzrfne?file=/src/App.js

Answer 3

Here is one solution I have been experimenting with, although I have the impression it isn't very idiomatic. I suppose one could look at it as a "micro-frontend" responsible exclusively for showing toasts.
import ReactDOM from 'react-dom/client';
import { RefObject, useRef } from 'react';
import { Toast, ToastMessage } from 'primereact/toast';
class NotificationService {
private toast?: RefObject<Toast>;
constructor() {
const toastAppRoot = document.createElement('div');
document.body.append(toastAppRoot);
const ToastApp = () => {
this.toast = useRef<Toast>(null);
return <Toast ref={this.toast} />;
};
ReactDOM.createRoot(toastAppRoot).render(<ToastApp />);
}
showToast(message: ToastMessage) {
this.toast!.current!.show(message);
}
}
export const notificationService = new NotificationService();
The simplicity of its usage is what's really nice of an approach like this. Import the service, call its method. It used to be that simple.