usePopoverStore

Creates a popover store to control the state of Popover components.

Code examples

const popover = usePopoverStore();
<PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
<Popover store={popover}>Popover</Popover>
const popover = usePopoverStore();
<PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
<Popover store={popover}>Popover</Popover>

Optional Props

`defaultOpen`

boolean | undefined = false
boolean | undefined = false

Whether the content should be visible by default.

`disclosure`

DisclosureStore | null | undefined
DisclosureStore | null | undefined

A reference to another disclosure store that controls another disclosure component to keep them in sync. Element states like contentElement and disclosureElement won't be synced. For that, use the store prop instead.

Live examples

Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.

`open`

boolean = false
boolean = false

Whether the content is visible.

Live examples

Combobox with linksUsing a Combobox with items rendered as links that can be clicked with keyboard and mouse. This is useful for creating an accessible page search input in React.

Dialog with React RouterUsing React Router to create a modal Dialog that's controlled by the browser history.

Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.

Lazy PopoverLazy loading Popover using React.lazy and React.useTransition to avoid downloading additional code until the user interacts with the button.

`placement`

Placement = "bottom"
Placement = "bottom"

The placement of the popover.

Live examples

Submenu with ComboboxNesting Notion-style dropdown menus with search & autocomplete features by combining Menu with Combobox.

Sliding MenuRendering nested Menu components to create submenus that slide in and out using CSS Scroll Snap.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Selection PopoverShowing an inline Popover when a text is selected. This example uses the getAnchorRect prop to position the flyout relative to the selected text.

Standalone PopoverAbstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop to determine the position of the popup.

Select GridUsing Select with SelectPopover rendered with the grid role to create a bidimensional list of selectable items.

`popover`

PopoverStore | null | undefined
PopoverStore | null | undefined

A reference to another popover store that's controlling another popover to keep them in sync.

`setMounted`

((mounted: boolean) => void) | undefined
((mounted: boolean) => void) | undefined

A callback that gets called when the mounted state changes.

Code examples

const [mounted, setMounted] = useState(false);
const disclosure = useDisclosureStore({ setMounted });
const [mounted, setMounted] = useState(false);
const disclosure = useDisclosureStore({ setMounted });

`setOpen`

((open: boolean) => void) | undefined
((open: boolean) => void) | undefined

A callback that gets called when the open state changes.

Code examples

const [open, setOpen] = useState(false);
const disclosure = useDisclosureStore({ open, setOpen });
const [open, setOpen] = useState(false);
const disclosure = useDisclosureStore({ open, setOpen });

`store`

Store<Partial<S>> | undefined
Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

`animated`

number | boolean | undefined
number | boolean | undefined

Deprecated: Manually setting the animated prop is no longer necessary. This will be removed in a future release.

Determines whether the content should animate when it is shown or hidden.

If true, the animating state will be true when the content is shown or hidden and it will wait for a CSS animation/transition to end before becoming false.
If it's set to a number, the animating state will be true when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming false.

Return Props

`setOpen`

SetState<boolean>
SetState<boolean>

Sets the open state.

Live examples

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Code examples

store.setOpen(true);
store.setOpen((open) => !open);
store.setOpen(true);
store.setOpen((open) => !open);

`setAnchorElement`

SetState<HTMLElement | null>
SetState<HTMLElement | null>

Sets the anchor element.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

`setPopoverElement`

SetState<HTMLElement | null>
SetState<HTMLElement | null>

Sets the popover element.

`setArrowElement`

SetState<HTMLElement | null>
SetState<HTMLElement | null>

Sets the arrow element.

`render`

() => void
() => void

A function that can be used to recompute the popover position. This is useful when the popover anchor changes in a way that affects the popover position.

Live examples

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Selection PopoverShowing an inline Popover when a text is selected. This example uses the getAnchorRect prop to position the flyout relative to the selected text.

`show`

() => void
() => void

Sets the open state to true.

Live examples

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Dialog with Framer MotionUsing Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Context menuShowing Menu when right-clicking on an element using the getAnchorRect prop to determine the position of the popover.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

`hide`

() => void
() => void

Sets the open state to false.

Live examples

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Sliding MenuRendering nested Menu components to create submenus that slide in and out using CSS Scroll Snap.

`toggle`

() => void
() => void

Toggles the open state.

`stopAnimation`

() => void
() => void

Deprecated: Use setState("animating", false) instead.

Sets the animating state to false, which will automatically set the mounted state to false if it was true. This means that the content element can be safely unmounted.

`setContentElement`

SetState<HTMLElement | null>
SetState<HTMLElement | null>

Sets the contentElement state.

`setDisclosureElement`

SetState<HTMLElement | null>
SetState<HTMLElement | null>

Sets the disclosureElement state.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

`disclosure`

DisclosureStore | null | undefined
DisclosureStore | null | undefined

Live examples

Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.

`getState`

() => S
() => S

Returns the current store state.

`setState`

<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void
<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void

Sets a state value.

`useState`

UseState<StoreState<T>>
UseState<StoreState<T>>

Re-renders the component when the state changes and returns the current state.

usePopoverStore

Live examples

Live examples

Live examples

Code examples

Code examples

Live examples

Live examples

Code examples

Live examples

Live examples

Live examples

Live examples

Live examples

Live examples

Stay tuned