Is there a way to give the toast a custom position above/left/right or below relative to another React component/DOM element?

[tonix-tuft]

Do you want to request a feature or report a bug? feature

What is the current behavior? I couldn't find a way to achieve this. Basically, my question is if there's a way to give a toast a custom position above or on the left/right or below another component. My use case is the following: I use react-toastify to show error messages to the user on form submit if some of the inputs have incorrect values and I would like the toast to be positioned near to the respective problematic input field. Is there a way to achieve this?

[fkhadra]

Hello @tonix-tuft ,

I think that in order to do that you'll have to modify the css. The sccs files are included. If you use them it will be easier for you to override the default style and positioning.

[tonix-tuft]

@fkhadra Thank you for your reply.

Yes, that could be a solution, I have seen that I can achieve what I want if I use a dedicated ToastContainer and then customize its position e.g. by modifying its top/left properties.

However, in my case, I only know the exact element relative to which I am showing a toast at runtime, so I guess I would need to use something like const myElemRect = e.getBoundingClientRect()and then use that information in order to position the toast container, but I was wondering if there's an easier way to achieve this already provided by react-toastify.

[tonix-tuft]

I was able to solve without using inline styles with JS code (hacky const myElemRect = e.getBoundingClientRect()) and used a custom toast container with custom CSS as you suggested.

Thank you.