Skip to content

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.