toast() with position absolute or fixed make the toast always opacity 0

[QzCurious]

I made a codesandbox for this here.

What I were trying to achieve is let toast follow mouse click position. So I need to set the position to absolute or fixed and { left: e.clientX, top: e.clientY }. Either setting position by className or style cause the toast element always opacity 0.

[timolins]

Hi there!

The problem comes from the ToastWrapper trying to determine the height of its content, which is not possible if it is set to position absolute. As long as there is no height, it assumes the content is not ready yet so it defaults to opacity 0.

https://github.com/timolins/react-hot-toast/blob/031a99c7f91fc04458dd43c6c2825aa745250c4c/src/components/toaster.tsx#L122-L136

If you want to give your toasts an absolute position you can either:

• Change the position of the toaster itself. <Toaster containerStyle={{ position: "absolute" }}/>
• Go headless with useToaster() for full flexibility

[timolins]

Related #229