useInteractions

A hook to merge or compose interaction event handlers together.

import { useInteractions } from '@skeletonlabs/floating-ui-svelte';

Usage

The useInteractions Svelte hook allows you to consume multiple interactions. It ensures that event listeners from different hooks are properly registered instead of being overruled by one another.

import { useFloating, useInteractions, useHover, useFocus } from '@skeletonlabs/floating-ui-svelte';

const floating = useFloating();

const hover = useHover(floating.context);
const focus = useFocus(floating.context);

const interactions = useInteractions([hover, focus]);

svelte

<!-- Reference Element -->
<div {...interactions.getReferenceProps()}">
	Reference
</div>

<!-- Floating Element -->
<div {...interactions.getFloatingProps()}>
	Floating
</div>

When you want to apply an event handler to an element that uses a props getter, make sure to pass it through the getter instead of applying it directly:

svelte

<!-- Incorrect -->
<div {...interactions.getReferenceProps()} onclick={/* event handler */}>Reference</div>

<!-- Correct -->
<div {...interactions.getReferenceProps({ onclick: /* event handler */})}>Reference</div>

This will ensure all event handlers will be registered rather being overruled by each-other.

Returns

`getReferenceProps`	The merged attributes for the reference element. (userProps?: HTMLAttributes) => Record<string, unknown>
`getFloatingProps`	The merged attributes for the floating element. (userProps?: HTMLAttributes) => Record<string, unknown>
`getItemProps`	The merged attributes for when dealing with a list inside the floating element. (userProps?: HTMLAttributes & ExtendedUserProps) => Record<string, unknown>

Compare

Compare to Floating UI React.