Modal
A Modal is a user interface component that displays content in a layer above the main page content, typically used to draw attention to important information or actions. The modal typically includes a header, body, and footer.
Import
To utilize the Modal component, import it from @vivakits/react-components.
import { Modal } from "@vivakits/react-components";Modal Component Structure
The Modal component is a composite component that serves as a container for various subcomponents which together form a functional modal dialog. ModalTrigger subcomponent is responsible for triggering the modal to open. It can be a button or any other interactive element that, when activated, opens the modal dialog. ModalContent subcomponent acts as a container for the content of the modal. It houses the ModalHeader ModalBody and ModalFooter subcomponents. Below is the structure
Variant
The variant prop specifies the variant of the modal, allowing for two different functionalities, default variant and screen-size variant.
Default modal
This variant has the default behavious of a modal.
Scrollable Modal
In case where the modal content is too large and needs to be scrolled, screen-size variant cannot be used.
Pop-up modal
This modal can be used to show a pop-up decision dialog to users especially when deleting an item and making sure if the user really wants to do that by double confirming.
Form element
This examplary modal that comes with intigated form input elements, can be used for data entry process.
Nested Modal
This example shows how nested modals can be used. Basically it's necessary when confirmation is needed from the user to perform an action.
CRUD Modal
In CRUD operations, this examplary modal can be used for creating new items.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | Displays the modal content | - |
| vairant | defaultscreen-size | Changes the modal scroll features, by default it's scroll inside modal, but if we use varient props `screen-size` , the scroll will append outside the modal | default |
| onClose | optional | Handles modal close event | |
| ModalHeader | Modal header will show the modal header with close button, with `closeButtonPosition` we can change the close icon position with these props `left`, `right` | `closeButtonPosition=right` | |
| ModalContent | ModalContent is the wrapper of the modal content, we can pass `isDismissible` props to close modal outside click of the modal | `isDismissible=true` | |
| ModalBody | ModalBody is the wrapper of the modal body content, it's takes children as a ReactNode, we can pass any content here | ||
| ModalFooter | ModalFooter component is the footer content of modal, it's append in the footer of the modal, it's takes children as a ReactNode |