Ariakit
/

CompositeHover

Renders an element in a composite widget that receives focus on mouse move and loses focus to the composite base element on mouse leave. This should be combined with the CompositeItem component, the useCompositeItem hook or any component/hook that uses them underneath.

Code examples

const composite = useCompositeStore();
<Composite store={composite}>

Optional Props


blurOnHoverEnd

BooleanOrCallback<React.MouseEvent<HTMLElement, MouseEvent>> | undefined

Determines if the composite item should lose focus when the mouse leaves. By default, this is set to true if focusOnHover is true.

Live examples


focusOnHover

BooleanOrCallback<React.MouseEvent<HTMLElement, MouseEvent>> | undefined = true

Determines if the composite item should be focused on hover.

Live examples


store

CompositeStore | undefined

Object returned by the useCompositeStore hook. If not provided, the closest Composite or CompositeProvider components' context will be used.

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.