Reusbale React Toastify Component

A react-toast component creadted with an intention to publish it as an private npm pacakge. It can usedul for many internal projects.

So, below is my code: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/App.js:297-484

However there are two problems encountered

1. on Click of buttons, two toast box are being displayed
2. Passing down of Ref to child components.

Again, the code uses, ref, current.showToast. So it sounds bad to pass down refs to child Components.

What I want to achieve is DECLARE ONE TIME and USE ANYWHERE.

So, in the parent Component

import {ToastSuccess, ToastSuccessMeta, ToastError, ToastErrorMeta } from 'custom-library'

return(
<>
   <ToastSuccess />
   <ToastError />
</>
)
   

In Child components

 <button  onClick={() => ToastSuccessMeta.showToast({ position: "top-right", message: "Custom Success Toast" })}>Show Toast </button>
 <button  onClick={() => ToastErrorMeta.showToast({ position: "top-right", message: "Custom Error Toast" })}>Show Toast Erro</button>

I don't know if I can achieve this. Please note that custom-library is the place where Toast-Container will be configured. . And projects will install and import it to use the toast.

Your help is appreciated.

Thank you

I recommended you, instead of making a multiple toast components you can make a common component as you can see the below code and you can use this component anywhere in your app.

import { toast } from "react-toastify";

export default (options) => {
  const toastOptions = {
    position: options.position,
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: "colored"
  };

  switch (options.type) {
    case "info":
      toast.info(options.message, toastOptions);
      break;
    case "success":
      toast.success(options.message, toastOptions);
      break;
    case "error":
      toast.error(options.message, toastOptions);
      break;
    case "warning":
      toast.warning(options.message, toastOptions);
      break;
    default:
      toast.error("Something went wrong", toastOptions);
  }
};