<ModalSide> Component<ModalSide> overlays a <Card> to the side of site's page or the side of specified section.
<ModalSide> handles esc key to close itself. Once closed, the <ModalSide> restores the focus to the previously focused element.
<ModalSide> also handles tab key to switch focus only for the focusable elements inside the <Card>.
Here the demo:
<ModalSide> ComponentThere are 2 ways to install <ModalSide> component into your react app project:
<ModalSide> Component<ModalSide> Componentexpanded PropertyExpands/Collapses the <ModalSide>.
The possible values are:
undefinedtruefalseHere the preview:
<ModalSide expanded={true}>
onExpandedChange PropertySets a callback function to be called when the user closes the <ModalSide>.
The callback function parameters:
event: ExpandedChangeEventmodalViewport PropertyDetermines the container UI should be blocked by <ModalSide>'s backdrop when <ModalSide expanded={true}>.
If not set (undefined or null), defaults to document's <body> (blocked a whole page).
Here the preview:
modalViewport={null}modalViewport={fooSectionRef}modalSideStyle PropertySets the side location of the <Card> of <ModalSide>.
The possible values are:
'inlineStart''inlineEnd''blockStart''blockEnd'Here the preview:
modalSideStyle='inlineStart'modalSideStyle='inlineEnd'modalSideStyle='blockStart'modalSideStyle='blockEnd'backdropStyle PropertySets the alternative behaviors of the <ModalSide>' 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 <ModalSide>'s children should be rendered or not when the <ModalSide expanded={false}>.
The possible values are:
undefinedfalsetrueOverwrites the internal (sub) components used as the composition of <ModalSide> component.
cardComponent PropertyOverwrites the internal <Card> component used as the composition of <ModalSide> component.
<ModalSide cardComponent={
<MyCustomCard />
} />collapseComponent PropertyOverwrites the internal <Collapse> component used as the composition of <ModalSide> component.
<ModalSide collapseComponent={
<MyCustomCollapse />
} />modalComponent PropertyOverwrites the internal <Modal> component used as the composition of <ModalSide> component.
<ModalSide modalComponent={
<MyCustomModal />
} />modalRef PropertyGets the DOM reference of the internal <Modal> component used as the composition of <ModalSide> component.
<ModalSide modalRef={fooModalRef} /><ModalSide modalComponent={
<Modal elmRef={fooModalRef} />
} />Because <ModalSide> is made from <Card>, so all properties from <Card> are inherited.
You can see the documentation of <Card> here.
There are several variables of <ModalSide> you can customize. Changing the variables affects all <ModalSide> instance and other components that depend on <ModalSide>.
Here the exposed variables:
The example of accessing, modifying, & adding variables: