search

timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.61k stars 314 forks source link

Centering toast in the middle of the screen #176

Open JamesBrightman opened 2 years ago

JamesBrightman commented 2 years ago

I would like to display the toast in the verticle center of the screen, regardless of the screen height. I see that there is a position prop on the Toaster component, but these focus on Top and Bottom - there is no verticle Center. I have tried containerStyle={{top: "50%"}} and containerStyle={{transform: "translateY(50%)"}} on the Toaster component, but these don't seem to quite center the toast - there is slightly more of a gap at the top than the bottom. image

Is there a magic CSS one-liner I am missing? Any help would be appreciated.

DutchJelly commented 2 years ago

I could be wrong, but shouldnt you use translateY(-50%)?

edw19 commented 2 years ago

how I could to show the toast in the middle screen with current API of react-hot-toast ?