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
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.
focusOnHover
BooleanOrCallback<React.MouseEvent<HTMLElement, MouseEvent>> | undefined = true
Determines if the composite item should be focused on hover.
Live examples
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.
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.