useClick
Adds click event listeners that change the open state.
import {
useFloating,
useInteractions,
useClick,
} from '@floating-ui/react-dom-interactions';
// ...
const {context} = useFloating();
const {getReferenceProps, getFloatingProps} = useInteractions([
useClick(context, {
// props
}),
]);
Props
interface Props {
enabled?: boolean;
pointerDown?: boolean;
toggle?: boolean;
ignoreMouse?: boolean;
}
enabled
default: true
Conditionally enable/disable the hook.
useClick(context, {
enabled: false,
});
pointerDown
default: false
Whether to prefer the pointerdown
event over
click
(for faster feedback). Keyboard clicks will
continue to work.
useClick(context, {
pointerDown: true,
});
toggle
default: true
Whether to toggle the open state with repeated clicks.
useClick(context, {
toggle: false,
});
ignoreMouse
default: false
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 be
not be desirable in some cases.
useClick(context, {
ignoreMouse: true,
});