<ModalCard> Component<ModalCard> overlays a <Card> to the entire site's page or entire specified section.
<ModalCard> handles esc key to close itself. Once closed, the <ModalCard> restores the focus to the previously focused element.
<ModalCard> also handles tab key to switch focus only for the focusable elements inside the <Card>.
Here the demo:
<ModalCard> ComponentThere are 2 ways to install <ModalCard> component into your react app project:
<ModalCard> Component<ModalCard> Componentexpanded PropertyExpands/Collapses the <ModalCard>.
The possible values are:
undefinedtruefalseHere the preview:
<ModalCard expanded={true}>
onExpandedChange PropertySets a callback function to be called when the user closes the <ModalCard>.
The callback function parameters:
event: ExpandedChangeEventmodalViewport PropertyDetermines the container UI should be blocked by <ModalCard>'s backdrop when <ModalCard expanded={true}>.
If not set (undefined or null), defaults to document's <body> (blocked a whole page).
Here the preview:
modalViewport={null}modalViewport={fooSectionRef}modalCardStyle PropertySets the alternative behaviors of the <Card> of <ModalCard>.
The possible values are:
undefined'regular''scrollable'Here the preview:
modalCardStyle='regular'modalCardStyle='scrollable'horzAlign PropertyDefines the horizontal alignment of the <Card> againts to <ModalCard>'s backdrop.
The possible values are:
undefined'center''start''end''left''right'Here the preview:
vertAlign PropertyDefines the vertical alignment of the <Card> againts to <ModalCard>'s backdrop.
The possible values are:
undefined'center''start''end''top''bottom'Here the preview:
backdropStyle PropertySets the alternative behaviors of the <ModalCard>' backdrop.
The possible values are:
undefined'regular''hidden''interactive''static'Here the preview:
backdropStyle='regular'backdropStyle='hidden'backdropStyle='interactive'backdropStyle='static'lazy PropertyDetermines whenever the <ModalCard>'s children should be rendered or not when the <ModalCard expanded={false}>.
The possible values are:
undefinedfalsetrueOverwrites the internal (sub) components used as the composition of <ModalCard> component.
cardComponent PropertyOverwrites the internal <Card> component used as the composition of <ModalCard> component.
<ModalCard cardComponent={
<MyCustomCard />
} />popupComponent PropertyOverwrites the internal <Popup> component used as the composition of <ModalCard> component.
<ModalCard popupComponent={
<MyCustomPopup />
} />modalComponent PropertyOverwrites the internal <Modal> component used as the composition of <ModalCard> component.
<ModalCard modalComponent={
<MyCustomModal />
} />modalRef PropertyGets the DOM reference of the internal <Modal> component used as the composition of <ModalCard> component.
<ModalCard modalRef={fooModalRef} /><ModalCard modalComponent={
<Modal elmRef={fooModalRef} />
} />Because <ModalCard> is made from <Card>, so all properties from <Card> are inherited.
You can see the documentation of <Card> here.
There are several variables of <ModalCard> you can customize. Changing the variables affects all <ModalCard> instance and other components that depend on <ModalCard>.
Here the exposed variables:
The example of accessing, modifying, & adding variables: