Possible for toast to appear near mouse click position?

[ADTC]

My idea is to have a toast appear near (above, below, left, right or on-top) the mouse-click position when the click was done on an action, so that the toast has an "Undo" button to reverse the action.

Would this be possible somehow? Note that there are multiple actions, dynamically generated (like a table with rows). Hopefully you won't say I have to put a <Toaster> next to every action button and use relative position. 😆 I'd rather just have the toast appear where the mouse click was or where the mouse pointer is.

(Same applies for finger tap on touchscreens.)

[ADTC]

Also, how could I implement a Toast with an "Undo" button which would somehow cancel a pending action?

[c-eiser13]

@ADTC came across this issue looking for something else, but I had this exact requirement and used a custom hook to return the x/y coordinates of the click and used the Toaster containerStyle prop to implement.

hook:

In the component:

finally, the Toaster:

The div with the ref wraps all my JSX where clicks can happen. Hope this helps...