How to integrate Modal from Laravel Breeze React starter kit?

Question

This was the original code from the Modal Component that came along with the Laravel Breeze React starter kit, but I can't see to get the modal to show up - is this code only for a dark background of low opacity to appear?

import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import IconClose from "./IconClose";

export default function Modal({
    children,
    show,
    maxWidth = "2xl",
    closeable = true,
    onClose = () => {},
}) {
    const close = () => {
        if (closeable) {
            onClose();
        }
    };

    const maxWidthClass = {
        sm: "sm:max-w-sm",
        md: "sm:max-w-md",
        lg: "sm:max-w-lg",
        xl: "sm:max-w-xl",
        "2xl": "sm:max-w-2xl",
    }[maxWidth];

    return (
        <Transition show={show} as={Fragment} leave="duration-200">
            <Dialog
                as="div"
                id="modal"
                className="fixed inset-0 flex overflow-y-auto px-4 py-6 sm:px-0 items-center z-50 transform transition-all"
                onClose={close}
            >
                <Transition.Child
                    as={Fragment}
                    enter="ease-out duration-300"
                    enterFrom="opacity-0"
                    enterTo="opacity-100"
                    leave="ease-in duration-200"
                    leaveFrom="opacity-100"
                    leaveTo="opacity-0"
                >
                    <div className="absolute inset-0 bg-gray-500/75 dark:bg-gray-900/75" />
                </Transition.Child>

                <Transition.Child
                    as={Fragment}
                    enter="ease-out duration-300"
                    enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    enterTo="opacity-100 translate-y-0 sm:scale-100"
                    leave="ease-in duration-200"
                    leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                    leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                >
                    <Dialog.Panel
                        className={`mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
                    >
                        {children}

                    </Dialog.Panel>
                </Transition.Child>
            </Dialog>
        </Transition>
    );
}

I am not sure where to put the text content of my modal, but I have placed it in a <div> within Dialog.Panel:

           <Dialog.Panel className={`z-0 mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto ${maxWidthClass}`}
                    >
                        {children}

                        <div className="z-10">
                            Is this where things are supposed to go? Is there no
                            window? Why cant i clsoe this
                            <IconClose onClick={() => close()} />
                        </div>
                    </Dialog.Panel>

but even with the z-index, the div still hides behind the background of lower opacity:

screenshot here

I can't seem to find any tutorial or explanation of how to integrate this in-built Modal Component into my React Application. Can someone offer some advice?

Answer 1

I know this answer is late. I have just used this in my own project.

Firstly, {children} is a prop to place whatever elements you passed within the Modal component as seen below.

<Modal >
    <div>Modal Header</div>  --------------|
    <div>Modal Content</div>               |--> Will be rendered in the children prop
    <button>Button</button>  --------------|
</Modal>

Now, you will need to use the Modal component by importing it to the React component where the modal will be used. So, do not place your content directly in the Modal component code itself. I provided a simple snippet code on the usage of the Modal component (though there are probably other ways to do it).

React States

const [projectId, setProjectId] = useState(null);

This state will trigger the modal to be displayed or not. And so, the value of the project ID will determine the visibility of the modal.

Button

<button 
    className="mx-1 font-medium text-red-600 dark:text-red-500 hover:underline" 
    onClick={() => {
        setProjectId(project.id);
    }}
>
    Delete
</button>

This button will assign a project ID value to the state, so that the modal can be visible on the next re-render.

Modal

import Modal from "@/Components/Modal";

{projectId && (
    <Modal show={true} maxWidth="sm" onClose={() => { setProjectId(null)}}>
        <div className="py-3 text-lg font-semibold text-center text-gray-200 border-b-[1px] border-b-gray-400">
            Project Deletion
        </div>

        <div className="py-3 text-center text-slate-100">Delete this project?</div>

        <div className="flex justify-center gap-5 pt-2 pb-4">
            <button type="button" 
                className="px-3 py-1 text-white bg-blue-500 rounded shadow transition-all hover:bg-blue-600"
                onClick={deleteProject} 
            >
                Confirm
            </button>

            <button type="button" 
                className="px-3 py-1 text-white bg-red-500 rounded shadow transition-all hover:bg-red-600" 
                onClick={() => {
                    setProjectId(null);
                }} 
            >
                Cancel
            </button>
        </div>
    </Modal>
)}

Here, I have set the necessary props to use the Modal component. Let's go through them:

1. show={true}

: I have set this to true. The reason is because the visibility of the modal is instead dependent on the value of the project ID from the state variable.

2. maxWidth={sm}

: Set the maximum width of the modal.

3. onClose={() => {setProjectId(null)}}

: Assign a null value to the project ID state variable so that the modal's visibility is hidden again. This onClose prop is used in the Modal component when the user clicks away from the modal to close the modal.

You can use a boolean state value, but I was using project ID based on my use case. Lastly, don't forget to import the Modal component!