useClick

Opens or closes the floating element when clicking the reference element.

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

Usage

svelte

<script lang="ts">
	import { useFloating, useInteractions, useClick } from '@skeletonlabs/floating-ui-svelte';

	const floating = useFloating();
	const click = useClick(floating.context);
	const interactions = useInteractions([click]);
</script>

<!-- Reference Element -->
<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
	Reference
</button>

<!-- Floating Element -->
<div
	bind:this={floating.elements.floating}
	style={floating.floatingStyles}
	{...interactions.getFloatingProps()}
>
	Floating
</div>

Options

`enabled`	Whether the Hook is enabled, including all internal Effects and event handlers. boolean true
`event`	The type of event to use to determine a "click" with mouse input. Keyboard clicks work as normal. "click" \| "mousedown" 'click'
`toggle`	Whether to toggle the open state with repeated clicks. boolean true
`ignoreMouse`	Whether to ignore the logic for mouse input (for example, if `useHover()` is also being used). When `useHover()` and `useClick()` are used together, clicking the reference element after hovering it will keep the floating element open even once the cursor leaves. This may not be desirable in some cases. boolean false
`keyboardHandlers`	Whether to add keyboard handlers (Enter and Space key functionality) for non-button elements (to open/close the floating element via keyboard "click"). boolean true

Compare

Compare to Floating UI React.