Reusbale React Toastify Component

Question

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

on Click of buttons, two toast box are being displayed
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

Does this answer your question? [React-toastify showing multiple toast](https://stackoverflow.com/questions/62578112/react-toastify-showing-multiple-toast) — Ahmad Faraz, Apr 19 '23 at 09:48
I asked two question. 1 is solved, while the other is how NOT to use REF. . — Honey Singh, Apr 19 '23 at 10:04

Ahmad Faraz · Answer 1 · 2023-04-19T10:56:47.447

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);
  }
};

Reusbale React Toastify Component

1 Answers1