A utility for triggering and closing popups.
Works great for tooltips, popup menus, dropdown selects, etc.
Available in two flavors:
Say you have a trigger element, and a popup.
<button>Trigger</button>
<div>Popup</div>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 ref={trigger.ref}>Trigger</button>
{
trigger.active &&
<div ref={trigger.popupRef}>
Popup
</div>
}The simplest way to use this tool is with a React hook.
import usePopupTrigger from 'popup-trigger/hook'
function MyComponent() {
let trigger = usePopupTrigger({
triggerOnFocus: true,
triggerOnHover: true,
triggerOnSelect: true, // Pop on touch/click the trigger, or
// on enter/space while focused.
})
return (
<>
<button ref={trigger.ref}>Trigger!</button>
{
trigger.active &&
<div ref={trigger.popupRef}>
<a href="https://frontarm.com"></a>
</div>
}
</>
)
}Combine with react-popper and portals for all your popup needs!
Internally, everything is contained within a vanilla JavaScript class.
import PopupTrigger from 'popup-trigger'
let trigger = new PopupTrigger({
triggerOnFocus: true,
triggerOnHover: true,
triggerOnSelect: true, // Pop on touch/click the trigger, or
// on enter/space while focused.
})
trigger.setTriggerNode(/* ... */)
trigger.setPopupNode(/* ... */)
trigger.getState() // { active, focused, hovering, selected }
trigger.subscribe(({ active, focused, hovering, selected ) => {})
trigger.dispose() // Clean up afterwards
trigger.close() // Close the popup imperatively