I want the popup or modal or toast to appear right where the button in clicked in react. But I was unable to find anything on this. Anything I could find was something like,it appeared in the center or the top or something predefined I guess still not right where the the button was clicked. How should approach this?
https://reactjs.org/docs/events.html#mouse-events
The MouseEvent parameter on the onClick callback contains the x and y coordinates of the click.
const handleClick = (mouseEvent) => {
console.log(`x = ${mouseEvent.clientX}, y = ${mouseEvent.clientY}`)
}
React provides 3 different coordinates client, page, and screen the example above makes use of the client coordinates. You can read more about their differences in the MDN Web Docs
const box = document.querySelector('#box');
box.addEventListener('click', function(event) {
console.log(`Horizontal: ${clientX}, Vertical: ${clientY}`);
// Take Position Current onClick
});
You can set top by clientY, left by clientX from event listener