Modal

EModal is a modal window that appears momentarily on top of the main screen. It pauses the current app operation to request the user for a response.

The main screen is blocked while the modal is active. Returning to the main window requires a user action or confirmation. Demo Here

Import

import EModal from "@components/Elements/EModal";

Usage

const ModalExample = () => {
    const [isModalShown, setIsModalShown] = useState(false);

    const onBtnClick = () => {
        setIsModalShown(true)
    }

    const onBackdropClick = () => {
        setIsModalShown(false)
    }

    return (
        <Fragment>
            <EBtn onClick={onBtnClick}>
                Open Modal
            </Btn>
            <EModal
                status={isModalShown}
                toggleModal={onBackdropClick}
                title="Modal title"
            >
                Modal content
            </EModal>
        </Fragment>
    );
};

export default ModalExample;

Props

For EModal component, the following props are available:

Prop	Type	Default	Note
footer	node	-	Footer content.
portal	Boolean	true	Enables react portal.
blurEffect	Boolean	true	Applies background blur.
scrollable	Boolean	false	Activates overflow-y-auto.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
square	Boolean	false	Removes rounded corners of the element.
closeIcon	Boolean	false	Adds close icon to modal header.
title	node	-	Adds a title to the EModal element.
maxHeight	[String, Number]	-	Sets the component's max height. Default unit is px.
status	Boolean	false	Controls the visible/hidden state of modal.
disablePageScroll	Boolean	true	Disables page scrolling when modal is open.
className	String	-	Overrides or extends the component's wrapper styles.
persistent	Boolean	false	Persistent EModal is not discarded when touching outside.
size	String	"md"	The EModal element has three predefined sizes: sm, md, lg.
animation	String	"component-pop-out"	The EMenu element can be animated in many ways. Defined animations here.
position	String	"center-center"	The EModal element can appear from the center-center, center-right, center-left, top-center, top-right, top-left, bottom-center, bottom-right, bottom-left, edge of the viewport.

Callback Functions

The EModal component contains following callback functions.

Function	Description
toggleModal	Toggles modal active state. function(event: React.SyntheticEvent, isOpen: Boolean) => void 👇 • event: The event source of the callback. • isOpen: visible/hidden state of modal

Children

The EModal component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.