Skip to content

FloatingOverlay

Provides base styling for a fixed overlay element.

import {FloatingOverlay} from '@floating-ui/react';

This is useful to dim content or block pointer events behind a floating element, in addition to locking the body scroll.

Usage

It renders a <div> with base styling. Can be styled with any CSS solution.

function App() {
  return (
    <FloatingOverlay>
      <div />
    </FloatingOverlay>
  );
}

Props

interface FloatingOverlayProps {
  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.

<FloatingOverlay lockScroll>
  {/* floating element */}
</FloatingOverlay>