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 /><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.