0

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

The installed npm package cannot reference the parent project's ToastContainer

<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

Claim
  • 775
  • 3
  • 12
  • 32

0 Answers0