Throughout the course of my career in Web Development there has always been a need for modal dialog boxes, but also more importantly
the need to support accessibility. While working on a current project, the team decided to use a 3rd party modal component
to keep things moving quickly. Like with all easy things through, we ran into problems later. We discovered that the version
of the component we were using did NOT support accessibility. This was something that had been corrected since we initially
added the component to the project, but again, like all easy things, you pay the price later. There were breaking changes in
updating the component. With all that, I held true to my philosophy of “Sometimes it is just better to write it yourself”.
So here we go…
This component renders a Modal component, controllable through events.
To use the component, import Modal only once and then display it by passing a boolean value to the isVisible attribute.
Create the component
We use useEffect to setup an event listener on the document to listen for the esc key to be pressed.
This is acting much like componentDidMount on a class-based component. Since we do not want this event listener
lingering after we are done using the component, return a function that removes the event listen which will
called when the component is destroyed.