Modal

Props

Prop	Type	Default	Required
variant	"primary" \| "secondary" \| "tertiary" \| "default" \| "warning"	"default"	yes	style of the modal
open	boolean	false	yes	the state to open the modal
setOpen	SetStateAction<boolean>	none	yes	the state action to open the modal
modalTitle	string	""	no	title of the modal
modalActions	Array	[ ]	no	buttons at the bottom of the modal
modalImage	ReactNode	<></>	no	image inside the modal
modalDraggable	boolean	false	no	draggable modal
modalCloseButton	boolean	true	no	shows/hides the close button
outsideClickClose	boolean	false	no	closes the modal when clicking outside
danger	boolean	false	no	displays danger animation
className	string	""	no	set additional classNames

Importing Modal

import { Modal } from "cerberusui"

Open/Close Modal

Use the useState hook in your component and pass it to the Modal component

const [open, setOpen] = useState(false);
 
return (
    <>
        <Button onClick={() => setOpen(true)} variant="primary">Open Modal</Button>
        <Modal open={open} setOpen={setOpen} variant="default">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
        </Modal>
    </>
)

ℹ️

Important For readability reasons the open and setOpen props aren't included in the other code examples

Variants

<Modal modalTitle="Default Modal" variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Options

Title

<Modal 
    modalTitle="Default Modal with Title"
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Image

The modalImage prop displayes the passed image on the left side of the image.

When the viewport gets to small the images display is set to display: none;.

<Modal 
    modalTitle="Default Modal with Icon"
    modalImage={
        <img src="https://example.com/your-image.png" />
    } 
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Actions

Inside the modalActions Array you can define buttons which will be displayed at the bottom right corner of the modal.

For each action you can define an action which has the type Function, an actionTitle which has the type string and an actionVariant which uses the variants from the Button Component.

<Modal 
    modalTitle="Default Modal with Actions"
    modalActions={[{
        action: () => alert("modal alert"),
        actionTitle: "Alert",
        actionVariant: "warning"
    }, {
        action: () => setOpen(false),
        actionTitle: "Close",
        actionVariant: "secondary"
    }]}
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Without Close Button

When this option is set to false the default close button doesn't show up.

Make sure to implement an alternative closing button like shown in #Actions or enable outsideClickClose.

<Modal 
    modalTitle="Default Modal without Close Button"
    modalCloseButton={false}
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Close on Outside Click

<Modal 
    modalTitle="This Modal closes when clicked outside"
    outsideClickClose={true}
    modalCloseButton={false} // this is optional
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Danger

<Modal 
    modalTitle="Danger Modal"
    danger={true}
    variant="warning">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Combined

<Modal 
    modalTitle="Combined Modal"
    modalActions={[{
        action: () => alert("modal alert"),
        actionTitle: "Alert",
        actionVariant: "warning"
    }, {
        action: () => setOpen(false),
        actionTitle: "Close",
        actionVariant: "secondary"
    }]}
    modalImage={
        <img src="https://example.com/your-image.png" />
    } 
    danger={true}
    outsideClickClose={true}
    modalCloseButton={false}
    variant="warning">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Draggable

The modal uses the package react-draggable (opens in a new tab) to move the modal around.

<Modal
    modalTitle="Default Modal Draggable"
    modalDraggable={true}
    variant="default">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda, reprehenderit.</p>
</Modal>

Join