-
Is it possible to use a non-Ariakit Popover for Ariakit Menu (and other components)? I didn't see any example like this or references in GitHub. My use case is gradually adopting Ariakit, and since I already have a Popover component, it would be great not to have two different ways to lay out floating elements, etc. I tried to combine the two via Ariakit's CleanShot.2024-03-11.at.21.13.20.mp4I also tried a few other ways to compose the two libraries, but only one seemed to somewhat work ( The ideal situation is allowing Ariakit to control everything - the Any advice on how (if at all) it's recommended to compose Ariakit with other libraries like this would be much appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
If you don't want to manage the state with React, you can rely on Ariakit stores: // You can optionally pass `open` and `setOpen` from external props to the menu store
const menu = Ariakit.useMenuStore({ open: props.open, setOpen: props.onClose });
const internalOpen = menu.useState("open");
<Ariakit.MenuProvider store={menu}>
<RadixPopover.Root open={internalOpen} onOpenChange={menu.setOpen}> For the content element, you can either use the <RadixPopover.Content
onOpenAutoFocus={(event) => event.preventDefault()}
> There's a few Radix UI examples on the site. |
Beta Was this translation helpful? Give feedback.
If you don't want to manage the state with React, you can rely on Ariakit stores:
For the content element, you can either use the
MenuList
component, or useMenu
withupdatePosition
={() => {}}
and delegate the auto focus control to Ariakit by disabling it on the Radix side:There's a few Radix UI exa…