I have a basic react app where I installed my own npm general library that contains general components (Buttons, Grids etc.) and a file with API calls that launch toasts
upon certain returned statuses such as 500, 200 etc. It looks like this.
import {toast} from 'react-toastify';
class ApiService {
get(path){
return this.request(path ?? null, 'get').then((res) => res.data)
.catch((error) => {
toast.error(`${error.message} at getting ${path ?? 'all'}`);
},
);
}
...
}
This goes on for PUT, POST as well and it is transpiled into the dist
folder which I then install in other projects via npm install myLibrary
.
This file was in every project so in order to not repeat myself I extracted it to an npm project, but now my toasts won't work anymore since the project isn't wrapped by ToastContainer
.
Every project this general npm library is installed in, has a toast container in App.js - so basic toast.xyz()
calls work perfectly. Only the extracted toast
calls won't work anymore.
Here's a visual help
<ToastContainer
position='bottom-left'
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
containerId='A'
/>
So I guess the installed npm package's toasts
cannot reference the parent project's ToastContainer so they won't work.
Any other way I could launch toasts
from external packages in a parent project?
Thanks