alexkatz / react-tiny-popover

A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.
MIT License
454 stars 121 forks source link

Added onTriggerOutside callback #170

Closed mauriceackel closed 10 months ago

mauriceackel commented 2 years ago

When I was using the library I had the need to hide a popup, once the trigger element was outside the boundary element.

I figured, that there is now built-in function for this in the library as of now. Hence, I decided to add this functionality by adding a new property onTriggerOutside where you can pass a callback function that will be triggered whenever a popover is open and the trigger is outside the boundary element.

This behaviour can be adjusted using the two additional properties intersectInset (similar to boundary inset when computing an intersection) and intersectThreshold (defines how much % of the element has to be outside the boundary element). See the README for more details.

To implement this behaviour, I added a new custom hook that handles all the intersection computation using the Intersection Observer API. To optimise the performance, I only recreate the observer if relevant properties change and I only listen to intersection events if the popover is open.