Custom Toast Position

[echosssss]

How can I entirely customize position of toast? I wanna use a position except presets (like top-left, bottom-center etc.).

[urg0]

To entirely customize the position of a toast in React Hot Toast, you can use the style prop to set a specific position. For example:

toast('Your message here', {
  style: {
    top: '10px',
    right: '20px',
  },
});

Alternatively, you can use the toast.custom method to render any custom JSX element, giving you full control over its placement. For example:

toast.custom(
  <div style={{ position: 'fixed', top: '50px', right: '10%' }}>
    Custom Toast Content
  </div>
);

These methods give you flexibility depending on whether you need simple adjustments or a completely custom layout. Both approaches ensure your toast notifications appear exactly where you want them on the screen.