popup-trigger
A utility for triggering and closing popups.
Works great for tooltips, popup menus, dropdown selects, etc.
Available in two flavors:
How it works
Say you have a trigger element, and a popup.
TriggerPopup
You only want the popup to appear if the trigger is focused or selected -- or when the popup itself has focus.
This utility handles this for you by adding events to the trigger and popup nodes, and exposing an active
variable which you can use to switch the popup's visibility:
<button =>Trigger</button> triggeractive && <div => Popup </div>
React Hook
The simplest way to use this tool is with a React hook.
import usePopupTrigger from 'popup-trigger/hook' { let trigger = return <> <button =>Trigger!</button> triggeractive && <div => <a ="https://frontarm.com"></a> </div> </> }
Combine with react-popper and portals for all your popup needs!
Vanilla JS
Internally, everything is contained within a vanilla JavaScript class.
let trigger = triggerOnFocus: true triggerOnHover: true triggerOnSelect: true // Pop on touch/click the trigger, or // on enter/space while focused. triggertrigger trigger // { active, focused, hovering, selected }trigger