Ariakit
/

useHovercardStore

Creates a hovercard store to control the state of Hovercard components.

Code examples

const hovercard = useHovercardStore({ placement: "top" });
<HovercardAnchor store={hovercard}>@username</HovercardAnchor>
<Hovercard store={hovercard}>Details</Hovercard>

Optional Props


defaultOpen

boolean | undefined = false

Whether the content should be visible by default.


disclosure

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


hideTimeout

number | undefined

The amount of time in milliseconds to wait before hiding the popup. It defaults to the value passed to timeout.

Live examples


open

boolean = false

Whether the content is visible.

Live examples


placement

Placement = "bottom"

The placement of the popover.

Live examples


popover

PopoverStore | null | undefined

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


setMounted

((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 });

setOpen

((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 });

showTimeout

number | undefined

The amount of time in milliseconds to wait before showing the popup. It defaults to the value passed to timeout.

Live examples


store

Store<Partial<S>> | undefined

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

Live examples


timeout

number = 500

The amount of time in milliseconds to wait before showing and hiding the popup. To control the delay for showing and hiding separately, use showTimeout and hideTimeout.


animated

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>

Sets the open state.

Live examples

Code examples

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

setAnchorElement

SetState<HTMLElement | null>

Sets the anchor element.

Live examples


setPopoverElement

SetState<HTMLElement | null>

Sets the popover element.


setArrowElement

SetState<HTMLElement | null>

Sets the arrow element.


render

() => 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


show

() => void

Sets the open state to true.

Live examples


hide

() => void

Sets the open state to false.

Live examples


toggle

() => void

Toggles the open state.


stopAnimation

() => 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>

Sets the contentElement state.


setDisclosureElement

SetState<HTMLElement | null>

Sets the disclosureElement state.

Live examples


setAutoFocusOnShow

SetState<boolean>

Sets the autoFocusOnShow state.

Live examples


disclosure

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


getState

() => S

Returns the current store state.


setState

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

Sets a state value.


useState

UseState<StoreState<T>>

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

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on API Reference.

Read latest issue

No Spam. Unsubscribe at any time.