Better React Modals
July 14, 2020
I woke up in the morningâ days ago, I thought It will be a good day, but I checked GitHub and I found a package with Reoverlay name, I changed my thoughts because the day became an amazing day. So, maybe You ask What⊠Why an npm package would make your day? It is a great question, if youâre curious about the answer, read this article. One of the boring concepts in Front-end world and especially React is Modals and managing them. to understand, Watch this example that I found it on Reoverlay Github:
const HomePage = () => {
const [isDeleteModalOpen, setDeleteModal] = useState(false)
const [isConfirmModalOpen, setConfirmModal] = useState(false)
return (
<div>
<Modal isOpen={isDeleteModalOpen}>
Code here...
</Modal>
<Modal isOpen={isConfirmModalOpen}>
Code here...
</Modal>
Code here...
<button onClick={() => setDeleteModal(true)}>Show delete modal</button>
<button onClick={() => setConfirmModal(true)}>Show confirm modal</button>
</div>
)
}
Yea, Some Modal components, Some buttons for each Modal, Some states for Modals and buttons, Itâs confusing. Now, Imagine you have a bigger project, with more states, more Modals, more buttons, It will be a bad and inefficient way. Itâs time to start with Reoverlay because everyone wants to change his life.
Start
One of the reasons why we use Reoverlay is that it gives us new ways of managing Modals. Reoverlay has two ways to manage Modals. Using the Components as arguments, or using configs as arguments, I prefer the second one, so we will use it. First We need our App component like this:
import React from 'react';
import { Reoverlay, ModalContainer } from 'reoverlay';
import { AuthModal, DeleteModal, ConfirmModal } from '../modals';
// Here you pass your modals to Reoverlay
Reoverlay.config([
{
name: "AuthModal",
component: AuthModal
},
{
name: "DeleteModal",
component: DeleteModal
},
{
name: "ConfirmModal",
component: ConfirmModal
}
])
const App = () => {
return (
<>
...
<Routes />
...
<ModalContainer />
</>
)
}
In this simple way, In App.js We need to pass our config array to Reoverlay with config method. The config array must have an object with two properties: component name and the component itself. We need to put the ModalContainer component because Modals will be there. We can use component names in events later because we should pass the component names. The benefit of this way is that We donât need to import The modals everywhere, We just import all of them in the App component and pass them to Reoverlay config.
Modals
Now take a look at ConfirmModal.js:
import React from 'react';
import { ModalWrapper, Reoverlay } from 'reoverlay';
// reoverlay css
import 'reoverlay/lib/ModalWrapper.css';
const ConfirmModal = ({ confirmText, onConfirm }) => {
const closeModal = () => {
Reoverlay.hideModal();
}
return (
<ModalWrapper>
{confirmText}
<button onClick={onConfirm}>Yes</button>
<button onClick={closeModal}>No</button>
</ModalWrapper>
)
}
We have two props that Weâll pass them in other components. hideModal as its name, it is for hiding the modals.
Last Stepđ
In this step, We want to show ConfirmModal component with clicking a button:
import React from 'react';
import { Reoverlay } from 'reoverlay';
const PostPage = () => {
const deletePost = () => {
// showModal("Component name in config", props)
Reoverlay.showModal("ConfirmModal", {
confirmText: "Are you sure you want to delete this post",
onConfirm: () => {
axios.delete(...)
}
})
}
return (
<div>
<p>This is your post page</p>
<button onClick={deletePost}>Delete this post</button>
</div>
)
}
In this component, We created a button for calling deletePost function. What does this function do? It uses showModal method from Reoverlay. This method takes two arguments, The Modal component name as the config we created in App.js component and the props of that Modal component. When we click the button, The confirmModal will become visible, And if we click âYesâ, Then axios.delete would be called.
Letâs watch
code with few changes on codesandbox: