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>;
};
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>
</>
);
};
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. |