Overlay

Overlay2 renders content above the page, with an optional backdrop, focus management and escape handling. Dialog, Drawer, Alert and Popover are built on it. Use it directly only when none of them fits.

Usage#

import { Overlay2 } from "@clawscale/react";

Overlay2 is controlled. It renders its children while isOpen is true and calls onClose when the user presses escape or clicks outside. Update your state there to close it.

It needs an OverlaysProvider above it. ClawscaleProvider renders one.

Examples#

Basic#

Overlay content is position: fixed. Place it with your own styles.

import { Button, Card, H5, Overlay2 } from "@clawscale/react";
import { useState } from "react";

export default function OverlayBasic() {
  const [isOpen, setIsOpen] = useState(false);
  const close = () => setIsOpen(false);
  return (
    <>
      <Button text="Show run summary" onClick={() => setIsOpen(true)} />
      <Overlay2 isOpen={isOpen} onClose={close}>
        <Card
          elevation={4}
          style={{ left: 0, right: 0, top: "15vh", margin: "0 auto", width: "min(440px, calc(100vw - 32px))" }}
        >
          <H5>Run 4812 finished with warnings</H5>
          <p>ingest-orders loaded 1,284,112 rows in 6 min 42 s. 312 rows failed schema validation.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
            <Button text="Close" onClick={close} />
            <Button intent="primary" text="Open run" onClick={close} />
          </div>
        </Card>
      </Overlay2>
    </>
  );
}

Scrolling#

Content taller than the viewport is clipped. Add Classes.OVERLAY_SCROLL_CONTAINER to make the overlay scroll. Dialog adds it for you.

<Overlay2 className={Classes.OVERLAY_SCROLL_CONTAINER} isOpen={isOpen} onClose={close}>
  <Card>{/* long content */}</Card>
</Overlay2>

Child refs#

Overlay2 attaches a ref to each child to run its enter and exit transitions. Children must be DOM elements or components that forward their ref, like Card.

• A single child without its own ref needs nothing.
• If the child has a ref, pass the same ref object to childRef.
• With several children, pass childRefs, keyed by each child's key.

Interactive playground#

Props interface#