Modal- The Modal component.ModalBody- The body for the modal.ModalCloseButton- The close button for the modal.ModalContent- The content for the modal.ModalFooter- The footer for the modal.ModalHeader- The header for the modal.ModalOverlay- The background overlay for the modal.
import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay
} from "@dreamy-ui/react";export default function BasicModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}export function SizeModals() {
const sizes = [
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"6xl",
"7xl",
"8xl"
] as const;
const ModalSize = useCallback(({ size }: { size: (typeof sizes)[number] }) => {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open {size} Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} size={size}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{size} Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>This is a {size} modal!</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}, []);
return (
<Flex wrapped gap={2}>
{sizes.map((size) => (
<ModalSize size={size} key={"modal-size-" + size} />
))}
</Flex>
);
}- inside: The modal body will scroll inside the modal.
export default function ScrollBehaviorModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} scrollBehavior={"inside"}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}- outside: The modal body will scroll outside the modal. If your content is long and it bugs the modal position, ensure to set the
placement="top"prop.
export function ScrollableOutsideModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal
isOpen={isOpen}
onClose={onClose}
scrollBehavior="outside"
placement="top"
size={"lg"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>
{[...Array(10)].map((_, i) => (
<LoremIpsum key={`ipsum-${i}`} p={1} />
))}
</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}Sometimes you might want to place the modal on the top to avoid layout shifts.
export function PlacementModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} placement={"top"}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}