Architecting and Making a Modal with React

Without Sacrificing User OR Developer Experience

Alek Angelov
Oct 11 · 4 min read
Image for post
Image for post

Why do we love React?

Image for post
Image for post
how I usually be

It’s a declarative UI building powerhouse. It separates concerns in a way that makes a component do one thing, and it does it amazingly. Currently, we write functions, those functions get called by other functions and they display some stuff on the screen. Pretty simple, as it should 💅. I could go on for days why I love this library, but I won’t since you guys want to make a better Modal.

Prerequisites — Story and Styling

aka the boring stuff

The modal has a wrapper that has a body. That body has a title, exit button and content. Just copy and paste the style, but I encourage you to write your own. Most of the styling came from the user story.

The wrapper is fixed, since we always want it at the front of the view. When the user clicks a button, the modal opens in view, providing the content in context, e.g. read more button. If the user clicks outside of the body or on the exit button, the modal closes. There should be an entry/exit animation and the modal content stays in view for the whole duration of the animation. When the modal is in view, the user can’t scroll the page.

Image for post
Image for post
the .scss file
Image for post
Image for post
the html

Ok, now that that’s out of the way, we can get down to the nitty gritty.

Architecture — The meat and the potatoes

Image for post
Image for post
how this thing is gonna go down

We’ll be making the whole thing in a Context. The context has 2 functions and one state. The context will expose the 2 functions. One function will take in a component, that will be put in the content variable. The other one is going to close the modal and once the animation has finished, it’ll clear the content. The content will be a quasi hook, that will expose an object with 2 keys {title, children}. This will allow us to use a hook, without sacrificing customizability. Pretty simple. Let’s get to it.

Image for post
Image for post
ModalContext.jsx — AKA the meat and potatoes

Let’s figure out what’s actually going on. We’re creating a modal context with initial values and we’re making a helper hook useModalContext. We’re creating the actual Modal Extension component that will use the content of the modal as a “hook” that will expose a children and title prop.

Let’s create our first Modal Extension component. We’re just going to be making a normal functional component that returns an object, instead of JSX.

Image for post
Image for post
Example Content for the Modal aka our Quasi Hook

How to call the modal? That’s actually pretty simple. First we need to wrap our app in the ModalProvider and the on the click function, we’re going to put the Modal Extension component into the content of the ModalContext using our nifty little openModal function.

Image for post
Image for post
App.jsx — This is basically how your app is going to look like.

Adding some flare with React Spring

I may be biased, but I love React-Spring. It’s, currently, the best animation library for React. It animates outside of your component so it doesn’t render the component a million times (or to be exact 60 times per second). It’s declarative and the hooks are fantastic.

For this, we’ll have to rearrange everything so that we don’t get the countless errors that arise from doing this and then I’m going to tell you why.

Image for post
Image for post

First of all I moved the parent of the modal so I can move the spring into the Modal Context, it yields better performance and responsiveness. Then I moved the ModalContent into another component. This is pretty hard to explain, but there are going to be stack trace errors when doing these quasi hooks. React doesn’t normally want to do this, so you gotta cheat a lil bit (but sshhh don’t tell anybody 🤫). This avoids any and all errors.

VAC — Voila and Caveats

As far as I’ve seen, there are none. I’m using this Modal Component for a site for a pretty big company (it’s a car company) and it’s been nothing but smooth sailing. They have like 50 different forms with steps and stuff and it’s held up fantastically.

here’s the sandbox
Image for post
Image for post
Hey, that’s me

Socials — Stalk Me

I’m a full stack developer. I lift weights (not right now because of the whole COVID thing). I watch anime. I write JavaScript and I don’t have stockholm syndrome.

🔗 Website

🔒 LinkedIn

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store