FloatingOverlay
Provides base styling for a fixed overlay element to dim content or block pointer events behind a floating element.
It's a regular <div />, so it can be styled via any CSS
solution you prefer.
import {FloatingOverlay} from '@floating-ui/react-dom-interactions';
// ...
<FloatingOverlay>
<Dialog>
<button>Open</button>
</Dialog>
</FloatingOverlay>Props
interface Props {
lockScroll?: boolean;
}lockScroll
Whether the <body> is prevented from scrolling while the
overlay is rendered. Uses a robust technique that works on iOS
and handles horizontal scrolling.
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.