Appearance
Floating UI Options
placement
Floating positioning placement:
<Float placement="left-start">
All 12 placement in the Floating UI can be used:
- top
- top-start
- top-end
- right
- right-start
- right-end
- bottom
- bottom-start
- bottom-end
- left
- left-start
- left-end
strategy
The type of CSS position property, absolute
or fixed
:
<Float strategy="fixed">
offset
The offset (px) of the floating element from the reference element:
<Float offset={8}>
More options supported by
offset
, refer to Floating UI'soffset
documentation: https://floating-ui.com/docs/offset
shift
Move the reference elements back into the view:
<Float shift>
Set the offset (px) of the floating element from the view border:
<Float shift={8}>
More options supported by
shift
, refer to Floating UI'sshift
documentation: https://floating-ui.com/docs/shift
flip
Change to the opposite placement to keep it in view:
flip
cannot be used withautoPlacement
<Float flip>
Sets the minimum padding (px) of the floating element from the view border when flip:
<Float flip={10}>
More options supported by
flip
, refer to Floating UI'sflip
documentation: https://floating-ui.com/docs/flip
autoPlacement
Floating elements choose the placement with more space left:
autoPlacement
cannot be used withflip
<Float autoPlacement>
More options supported by
autoPlacement
, refer to Floating UI'sautoPlacement
documentation: https://floating-ui.com/docs/autoPlacement
autoUpdate
Automatically update floating elements when needed, the default value is true
. Can be set to false
to disable autoUpdate:
<Float autoUpdate={false}>
More options supported by
autoUpdate
, refer to Floating UI'sautoUpdate
documentation: https://floating-ui.com/docs/autoUpdate
middleware
If the above basic settings do not satisfy your needs, you can add the Floating UI middleware yourself:
import { offset } from '@floating-ui/react-dom'
const middleware = [
offset({
mainAxis: 10,
crossAxis: 6,
}),
]
<Float middleware={middleware}>
Or pass a function to get reference elements and floating elements in the parameters:
const middleware = ({ referenceEl, floatingEl }) => [
...
]