Creating popover menus

Hey, I’m looking to create popover menus with this kind of experience (from Shopify):

https://www.loom.com/share/2ae4312a24dc4a54800a898fe9477219

Some things to note:

• Has an anchor button which toggles the state
• Clicking away hides the menu

I would maybe be fine with using hover/focus state to handle it being open, too (it needs to also work on mobile browsers, though). It doesn’t necessarily need to be just onPress if that’s difficult.

Is something like this possible with the current API?

Added context

Another nice feature you’ll see in the video: if you click outside of the menu section onto somewhere else, the click event is still handled at the other spot you pressed. This can be easily achieved with a useClickAway(viewRef) function. This would be web-only behavior, since . That said, I think it could make sense to have in this library. (The clickaway feature would be a cherry on top. It isn’t a requirement for the menu behavior described above, so it’s fine if you’d like to go without it.)

Curious to hear your thoughts @eveningkid. Thanks again!

PS Another nice example of this is Vercel’s menu component, as well as their popover/tooltip.

[nandorojo]

@eveningkid this looks great!

My final request: I’d like an API to be able to close the popover without necessarily controlling its state. Imagine you click one of the menu items. It’s not a click-away event, but it should close the popover imperatively.

Something like this would be nice:

const popover = useRef(null)

return <Popover ref={popover} content={<Menu onPressItem={() => popover.current?.close()} />} />

This would be simple to implement with useImperativeHandle under the hood.

A custom hook would be a nice touch, too, but not totally necessary. I’d build something like this in my own app if this lib doesn’t have one:

const [ref, { close }] = usePopover()

const onPressMenuItem = () => {
  close()
}

<Popover ref={ref} />

[eveningkid]

Alright, it should now be working with 0.3.0. You can try it using this snack.

I think this should give you more flexibility to create interactive menus!