https://github.com/jamesknelson/popup-trigger

A helper for triggering popups on focus, hover, and selection.
https://github.com/jamesknelson/popup-trigger

Last synced: 4 months ago
JSON representation

A helper for triggering popups on focus, hover, and selection.

• Host: GitHub
• URL: https://github.com/jamesknelson/popup-trigger
• Owner: jamesknelson
• Created: 2019-06-26T03:52:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-29T14:47:43.000Z (about 5 years ago)
• Last Synced: 2024-10-28T14:27:53.955Z (4 months ago)
• Language: TypeScript
• Size: 141 KB
• Stars: 15
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# popup-trigger

**A utility for triggering and closing popups.**

Works great for tooltips, popup menus, dropdown selects, etc.

Available in two flavors:

- [React Hook](#react-hook)

- [Vanilla JS](#vanilla-js)

How it works

------------

Say you have a trigger element, and a popup.

```html

Trigger

Popup

```


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:

```jsx

Trigger

{

  trigger.active &&

  


    Popup

  

}

```


React Hook

----------

The simplest way to use this tool is with a React hook.

```jsx

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 (

    <>

      Trigger!

      {

        trigger.active &&

        


          

        

      }

    >

  )

}

```


Combine with [react-popper](http://npmjs.com/package/react-popper) and [portals](https://reactjs.org/docs/portals.html) for all your popup needs!

Vanilla JS

----------

Internally, everything is contained within a vanilla JavaScript class.

```js

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

```