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,
});