useClientPoint

Positions the floating element at a given client point (x, y), usually generated by a mouse event. By default, the client’s mouse position is automatically tracked.

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

This is useful to position a floating element at a given point, while also allowing anchoring to follow the point upon scroll.

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 clientPoint = useClientPoint(context);
 
  const {getReferenceProps, getFloatingProps} = useInteractions([
    clientPoint,
  ]);
 
  return (
    <>
      <div ref={refs.setReference} {...getReferenceProps()}>
        Reference element
      </div>
      {isOpen && (
        <div
          ref={refs.setFloating}
          style={floatingStyles}
          {...getFloatingProps()}
        >
          Floating element
        </div>
      )}
    </>
  );
}

The default behavior is to follow the mouse cursor clientX and clientY coordinates.

Pointer events

If the floating element is not interactive, disable pointer events:

.floating {
  pointer-events: none;
}

This will ensure that the floating element does not block point updates.

Props

interface UseClientPointProps {
  enabled?: boolean;
  axis?: 'both' | 'x' | 'y';
  x?: number | null;
  y?: number | null;
}

`enabled`

default: true

Conditionally enable/disable the Hook.

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

`axis`

default: 'both'

Whether to restrict the client point to an axis and use the reference element (if it exists) as the other axis. This can be useful if the floating element is also interactive.

useClientPoint(context, {
  axis: 'x',
});

`x`

default: null

An explicitly defined x client coordinate.

useClientPoint(context, {
  x: 100,
});

`y`

default: null

An explicitly defined y client coordinate.

useClientPoint(context, {
  y: 100,
});