use Client Point
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';
import {useClientPoint} from '@floating-ui/react';
Usage
This hook is an interaction hook that returns event handler props.
To use it, pass it the context
context
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 {x, y, strategy, refs, 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={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
}}
{...getFloatingProps()}
>
Floating element
</div>
)}
</>
);
}
function App() {
const [isOpen, setIsOpen] = useState(false);
const {x, y, strategy, refs, 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={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
}}
{...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;
}
.floating {
pointer-events: none;
}
This will ensure that the floating element does not block point updates.
Props
interface Props {
enabled?: boolean;
axis?: 'both' | 'x' | 'y';
x?: number | null;
y?: number | null;
}
interface Props {
enabled?: boolean;
axis?: 'both' | 'x' | 'y';
x?: number | null;
y?: number | null;
}
enabled
default: true
true
Conditionally enable/disable the hook.
useClientPoint(context, {
enabled: false,
});
useClientPoint(context, {
enabled: false,
});
axis
default: 'both'
'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',
});
useClientPoint(context, {
axis: 'x',
});
x
default: null
null
An explicitly defined x
client coordinate.
useClientPoint(context, {
x: 100,
});
useClientPoint(context, {
x: 100,
});
y
default: null
null
An explicitly defined y
client coordinate.
useClientPoint(context, {
y: 100,
});
useClientPoint(context, {
y: 100,
});