Modal

A pop up Modal

Usage

A modal displays content that temporarily blocks interactions with the main view of a site

import { Modal } from @motor-js/core
//...
<Modal
header={...}
footer={...}
isShowing={isShowing}
>
Modal Content, like some filters...
</Modal>

Props

PropDescriptionOptions / Example
childrenContents of the modal.node
footerFooter of the modal.node
headerHeader of the modal.node
widthWidth of the modal.oneOf
'10%'
'20%'
'30%'
'40%'
'50%'
'60%'
'70%'
'80%'
'90%'
'100%'
'10vw'
'20vw'
'30vw'
'40vw'
'50vw'
'60vw'
'70vw'
'80vw'
'90vw'
'10vw'
zIndexzIndex of the modal.string
isShowingIs the modal showing.bool
onOutsideClickFunction to execute when user clicks outside the sidebarfunction

Sample Syntax

Modal configuration

<Modal
header={...}
footer={...}
isShowing={isShowing}
>
Modal Content, like some filters...
</Modal>

Example

Simple Modal

Render a simple Modal

function ModalDemo() {
const { isShowing, toggle } = useModal();
return (
<Motor config={config}>
<Modal
header={
<div style={{ fontSize: "20px", fontWeight: "bold" }}>
Modal Title
</div>
}
footer={
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<Button width="100px" onClick={toggle}>
Close
</Button>
</div>
}
isShowing={isShowing}
>
<div style={{ display: "flex", height: "50px", padding: "20px 0px" }}>
<Filter
label="Product Sub Group"
dimension={["Product Sub Group Desc"]}
size="small"
/>
</div>
</Modal>
<Button onClick={toggle}>Show Modal</Button>
</Motor>
);
}

Modal with outsideClick

Render a Modal with outsideCLick functionality

function ModalDemo() {
const { isShowing, toggle } = useModal();
const handleClick = () => {
toggle();
};
return (
<Motor config={config}>
<Modal
header={
<div style={{ fontSize: "20px", fontWeight: "bold" }}>
Modal Title
</div>
}
footer={
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<Button width="100px" onClick={toggle}>
Close
</Button>
</div>
}
isShowing={isShowing}
onOutsideClick={handleClick}
>
<div style={{ display: "flex", height: "50px", padding: "20px 0px" }}>
<Filter
label="Product Sub Group"
dimension={["Product Sub Group Desc"]}
size="small"
/>
</div>
</Modal>
<Button onClick={toggle}>Show Modal</Button>
</Motor>
);
}