useClick

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

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

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

Usage

This hook is an interaction hook that returns event handler props.

To use it, pass it the contextcontext object returned from useFloating()useFloating(), and then feed its result into the useInteractions()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>
      )}
    </>
  );
}

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 Props {
  enabled?: boolean;
  event?: 'click' | 'mousedown';
  toggle?: boolean;
  ignoreMouse?: boolean;
  keyboardHandlers?: boolean;
}

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

enabled

default: truetrue

Conditionally enable/disable the hook.

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

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

event

default: 'click''click'

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

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

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

toggle

default: truetrue

Whether to toggle the open state with repeated clicks.

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

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

ignoreMouse

default: falsefalse

Whether to ignore the logic for mouse input (for example, if useHover()useHover() is also being used).

When useHover()useHover() and useClick()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,
});

useClick(context, {
  ignoreMouse: true,
});

keyboardHandlers

default: truetrue

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

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