react-hot-toast icon indicating copy to clipboard operation
react-hot-toast copied to clipboard

Published 20 hours ago • verified publisher icon timolins

Centering toast in the middle of the screen

Open JamesBrightman opened this issue 2 years ago • 2 comments

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.

JamesBrightman avatar Apr 28 '22 10:04 JamesBrightman

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

DutchJelly avatar May 04 '22 12:05 DutchJelly

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

edw19 avatar May 31 '22 19:05 edw19