How display Toaster from external library ?

[Vincent-Alibert]

Hello, I use a personal library which exposes components. Within its components I use toast.success("test message");. However, I cannot make the toasts appear in the main application since with the actions of the library components. I have to add the <Toaster/> in my components for the toasts to appear.

What 's the solution to add only <Toaster/> on the main application ?

exemple :

import { Toaster } from 'react-hot-toast';
import ButtonCustom from 'customLib';

const App = () => {
  return (
    <div>
      <ButtonCustom />
      <Toaster />
    </div>
  );
};

since customLib

import toast from 'react-hot-toast';

const notify = () => toast.success('Here is your toast.');

const ButtonCustom = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>

    </div>
  );
};
export default ButtonCustom

Thanks for the help

[Joshuapwilley]

I've documented a solution for this issue here: https://github.com/timolins/react-hot-toast/issues/223#issuecomment-1353375964

[timolins]

I'll close this in favour of @Joshuapwilley solution