v14.0.8


layouts

Overlay container

Render content above everything

Features

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

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

NameDescription
titleIdThe auto generated id to assign to the custom modal title to give it an accessbility name
onCloseThe callback passed to the Modal and available inside the Modal content.

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024