layouts

Overlay container

Render content above everything

Features

Easy usage
Create a portal to the desired container
No z-index issues

Links

Open in playground Open in Storybook View source

Anatomy

import { OverlayContainer } from "@wonderflow/react-components";

export default () => {
  return <OverlayContainer>...</OverlayContainer>;
};

tsx

Overlay context

The OverlayContainer component exposes a useOverlayContext hook to its children. You can use it to access some properties of the overlay container from within your children.

import {
  OverlayContainer,
  useOverlayContext,
  Button,
  Text,
  Card,
} from "@wonderflow/react-components";

export const OverlayContent = () => {
  const { onClose, titleId } = useOverlayContext();

  return (
    <Card>
      <Text id={titleId} variant="heading-4">
        Overlay title is: {titleId}
      </Text>
      <Button onClick={() => onClose()} icon="xmark">
        Close modal
      </Button>
    </Card>
  );
};

export const PageExample = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show Modal</Button>
      <OverlayContainer onClose={() => setVisible(false)}>
        {visible && <OverlayContent />}
      </OverlayContainer>
    </>
  );
};

tsx

API Reference

OverlayContainer

PROPERTY

TYPE

DEFAULT

root

HTMLElement

document.body

index

number

4

overlayColor

enum

dark

onClose

function

obfuscate

boolean

true

useOverlayContext

Name	Description
`titleId`	The auto generated id to assign to the custom modal title to give it an accessbility name
`onClose`	The callback passed to the Modal and available inside the Modal content.