Module

useModalManager

Custom hook that manages the state of modals on a page.

Parameters:
Name Type Description
modalConfig Object.<string, JSX.Element>

View Source useModalManager.jsx, line 3

Example
import Modal1 from './Modal1'
import Modal2 from './Modal2'

const Page = () => {
    const { openModal, renderModal } = useModalManager({
        "modal1": Modal1
        "modal2": Modal2
    })

    const modal1Props = {
        data: { id: 1, name: "John Doe"},
        otherData: { id: 1, name: "Jane Doe"}
    }

    return (
        <div>
            <button 
                // Pass in the props for the component when you open the modal
                onClick={() => openModal("modal1", {
                    data: modal1Props["data"]
                    otherData: modal1Props["otherData"]
                })}
            >
                Open Modal 1
            </button>
            <button
                // If no props are necessary for the component, don't pass in anything
                onClick={() => openModal("modal2")}
            >
                Open Modal 2
            </button>
            {renderModal()} // Then use the `renderModal` function to render
        </div>
    )
}