useClick

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

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

Usage

This Hook returns event handler props.

To use it, pass it the context object returned from useFloating(), and then feed its result into the useInteractions() array. The returned prop getters are then spread onto the elements for rendering.

function App() {
  const [isOpen, setIsOpen] = useState(false);
 
  const {refs, floatingStyles, context} = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
  });
 
  const click = useClick(context);
 
  const {getReferenceProps, getFloatingProps} = useInteractions([
    click,
  ]);
 
  return (
    <>
      <div ref={refs.setReference} {...getReferenceProps()}>
        Reference element
      </div>
      {isOpen && (
        <div
          ref={refs.setFloating}
          style={floatingStyles}
          {...getFloatingProps()}
        >
          Floating element
        </div>
      )}
    </>
  );
}

Props

interface UseClickProps {
  enabled?: boolean;
  event?: 'click' | 'mousedown';
  toggle?: boolean;
  ignoreMouse?: boolean;
  keyboardHandlers?: boolean;
}

`enabled`

default: true

Conditionally enable/disable the Hook.

useClick(context, {
  enabled: false,
});

`event`

default: 'click'

The type of event to use to determine a “click” with mouse input. Keyboard clicks work as normal.

useClick(context, {
  event: 'mousedown',
});

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

`keyboardHandlers`

default: true

Whether to add keyboard handlers (Enter and Space key functionality) for non-button elements (to open/close the floating element via keyboard “click”).

useClick(context, {
  keyboardHandlers: false,
});