Floating Overlay
Provides base styling for a fixed overlay element to dim content or block pointer events behind a floating element.
It’s a regular <div />
<div />
, so it can be styled via any CSS
solution you prefer.
import {FloatingOverlay} from '@floating-ui/react';
function App() {
return (
<FloatingOverlay>
<div />
</FloatingOverlay>
);
}
import {FloatingOverlay} from '@floating-ui/react';
function App() {
return (
<FloatingOverlay>
<div />
</FloatingOverlay>
);
}
Props
interface Props {
lockScroll?: boolean;
}
interface Props {
lockScroll?: boolean;
}
lockScroll
Whether the <body>
<body>
is prevented from scrolling while the
overlay is rendered. Uses a robust technique that works on iOS
and handles horizontal scrolling.
<FloatingOverlay lockScroll>
{/* floating element */}
</FloatingOverlay>
<FloatingOverlay lockScroll>
{/* floating element */}
</FloatingOverlay>
If you need a more advanced solution, or find enabling this prop causes unwanted side effects in your application, react-remove-scroll is a solid solution.