<Modal> Component<Modal> overlays a dialog to the entire site's page or entire specified section.
You need to place <YourComponent> inside the <Modal> in order to make an interactive UI.
<Modal> handles esc key to close itself. Once closed, the <Modal> restores the focus to the previously focused element.
<Modal> also handles tab key to switch focus only for the focusable elements inside <YourComponent>.
Here the demo:
<Modal> ComponentThere are 2 ways to install <Modal> component into your react app project:
The <Modal> should have one child to be modal-ed. The child shoud be a native DOM element or functional/class component that implements <Generic>'s props.
<Modal>
<YourComponent />
</Modal>expanded PropertyExpands/Collapses the <Modal>.
The possible values are:
undefinedtruefalseHere the preview:
<Modal expanded={true}>
onExpandedChange PropertySets a callback function to be called when the user closes the <Modal>.
The callback function parameters:
event: ExpandedChangeEventmodalViewport PropertyDetermines the container UI should be blocked by <Modal>'s backdrop when <Modal expanded={true}>.
If not set (undefined or null), defaults to document's <body> (blocked a whole page).
Here the preview:
modalViewport={null}modalViewport={fooSectionRef}backdropStyle PropertySets the alternative behaviors of the <Modal>' 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 <Modal>'s children should be rendered or not when the <Modal expanded={false}>.
The possible values are:
undefinedfalsetrueBecause <Modal> is made from <Generic>, so all properties from <Generic> are inherited.
There are several variables of <Modal> you can customize. Changing the variables affects all <Modal> instance and other components that depend on <Modal>.
Here the exposed variables:
The example of accessing, modifying, & adding variables: