Enlarging Picture in Gallery

Viet Nguyen
Jul 16, 2022

By refactoring Modal not just only for form, I now can reuse it for different purpose. But I might need to modify more for future use.

Modal is good, especially when you want to enlarge or pop something up but just focus on that task only.

Keep that in mind, I have used modal to display a bigger version of picture.

Therefore I have to refactor the Modal for reusable purposes. Before, my modal is used only for form, so I added the form content into it directly. Besides, to display modal, we must have a wrapper component, which contains both modal component itself and an “anchor” component which trigger the modal and has a role of “reference” for the modal. It was a button component.

After redesign, my CustomModal can contain both of those, and the type of “anchor” component and content component now might be vary.

After that, I have another wrapper component to perform a specific modification for each type of Modal (the CustomModal is a general one, contains UI code in general and can be reused). The structures may be below:

CustomModal(props) {





PictureModal(){ //UI and function codes






The only thing which I still to figure out is that, I can not reuse my breakpoints for screen media from vanilla-extract but Material-UI default breakpoints. I am sure will come back to fix it as if we change the breakpoints in the future, we might need to worry about 1 place.


There is no comment here yet. Let's have one! ⌨️
Leave a Reply
Please be responsible and respectful when commenting. I reserve the right to remove any comment that I feel is inappropriate.