Custom hook that manages the state of modals on a page.
Parameters:
Name | Type | Description |
---|---|---|
modalConfig |
Object.<string, JSX.Element>
|
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>
)
}