Pure React Modal

Pure React Modal

5 years ago
Anonymous $Dftgs0JzgE

https://medium.com/@lucksp_22012/pure-react-modal-6e562a317b85

To get a project up and running quickly, it’s not uncommon to utilize a helper library, such as Bootstrap or Material, for the UI. It has its benefits: components and styles work out of the box with little configuration and it can save a lot of time. When our company wanted to introduce Themes, my talented senior developer brought up that it would be a good time to convert our components to use Styled-Components. As part of the conversion, I had the chance to replace Bootstrap’s Modal with a reusable component that had no outside dependencies. Some of the event callbacks I found interesting, to help with the fade in/out animation, which is why I wanted to share this.

TL;DR: You can utilize React’s Transition Events to help with callbacks of CSS transitions.