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 useCompositeItem hook or any component/hook that uses them underneath.

Code examples

const composite = useCompositeStore();
<Composite store={composite}>
  <CompositeHover render={<CompositeItem />}>Item</CompositeHover>
</Composite>
const composite = useCompositeStore();
<Composite store={composite}>
  <CompositeHover render={<CompositeItem />}>Item</CompositeHover>
</Composite>

Optional Props

`blurOnHoverEnd`

BooleanOrCallback<React.MouseEvent<HTMLElement, MouseEvent>> | undefined
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
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
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