Ariakit
/

CompositeHover

Composite

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 focusOnHover and blurOnHoverEnd props can be used to customize the behavior.

Code examples

<CompositeProvider>

  <Composite>

    <CompositeHover render={<CompositeItem />}>

      Item

    </CompositeHover>

  </Composite>

</CompositeProvider>

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

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.
Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.
Submenu with ComboboxNesting Notion-style dropdown menus with search & autocomplete features by combining Menu with Combobox.
Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.
Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.
Select with Combobox and TabsAbstracting Select to work alongside Combobox and Tab components, presenting a searchable, tabbed dropdown.

focusOnHover

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

Determines if the composite item should be focused when hovered over.

Note that the actual DOM focus will stay on the composite element. This item will get the data-active-item attribute so it can be styled as if it's focused.

Live examples

Multi-selectable ComboboxAllowing Combobox to select multiple options by passing an array value to the selectedValue prop.
Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.
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.
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.
Submenu with ComboboxNesting Notion-style dropdown menus with search & autocomplete features by combining Menu with Combobox.
Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.

render

RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.

store

CompositeStore<CompositeStoreItem> | undefined

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

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠