React Modal Tutorial Using Hooks and Styled Components

Learn how to make a simple React Modal Popup in this beginner React JS Tutorial. We will use React Hooks and styled components to build this project. You will be able to click outside of the modal and press the ESC key to close it as well.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Timeline
0:00 What we are building
0:56 Creating React App
3:32 Installing Dependencies
5:00 Creating Modal Button
18:52 Closing Modal on Outside Click
Source code
www.codavilla.com/posts/react...

[@ArcherJ1]

Love the way you built this. It leaves room to create more than one modal and style it easily. The only thing I'm having trouble with is getting it to render with portal.

[@joza5422]

2 days... i tell you 2 days I was trying to figure out how to do this and this solved my problem thank you Brian fr fr you're the truth

[@Azertex]

me too...

[@jiwanjeon3319]

This is a very good tutorial for beginners! I really appreciate your effort!!!

[@dearesthui]

Thanks for this tutorial. Really helpful for what I need. Keep up the good work.

[@ansulp5799]

Thanks Brian, awesome work. Looking forward for more React videos 👍

[@briandesign]

Thanks Ansul!

[@anuragk6722]

Amazing tutorial. absolutely loved it.

[@rachelperkins5874]

I'm only 5 months into coding and 1 month into building in React and I was able to create a modal thanks to you! Never knew you could create styled components like that! All my CSS lives on css files. I'm going to attempt writing it on the component itself on my next project! Your code looks so clean!

[@bgeorgiev87]

Having in mind that this is posted 4 months ago ... my advice to anyone who reads this comment is that 5 months of coding are not nearly enough to start with a framework, unless you are some sort of genious. Most ppl wouldn't even understand the main concepts of JS (or programming in general) that early in their career. Take it slow, learn core JS ES6 syntax and after that go ahead with your first library. Otherwise I highly doubt you'll be able to even understand what is what. In general this is a really missleading comment for any rookie, but that's just my opinion. Other than that - nice tutorial :) Thank you! All the best

[@rachelperkins5874]

@@bgeorgiev87 Started on freecodecamp end of September (granted i built static html css sites in high school for funsies). Opened a GitHub account September 23, first commit January 6, hired as a full time front end engineer contractor April 1, switched to full time software engineer employee for the company June 1. So yes, it can be done. Almost all my work is react and, yes, I cried, multiple times. But if you literally quit your job to spend months coding, you can become a front end/full stack engineer. I also live with an engineer, dropped a pretty penny on a bootcamp, have a masters in teaching, and taught math. So yeah, lots of advantages. But it can be done! Don’t give up!

[@ozzyfromspace]

@@rachelperkins5874 congratulations! You're my inspiration. I started my job search a few days ago (ironically also a trained engineer/mathematician, specialized in the spectral analysis of pdes, particularly numerical methods using Fourier and Laplace analysis to study hyperbolic systems). Hoping to get my first web-dev job before years end.

[@rachelperkins5874]

You can do it! At this stage, you should be doing 1-2 interview problems (LeetCode), studying up data structures, and searching for opportunities (either cold or in your network) daily! Hope you have a cool project or two deployed! Best of luck! It can be done!

[@LarsRyeJeppesen]

React is great for super beginners. Less so for experienced ...

[@rohitagni]

This is just what I wanted. Cheers man !

[@earthycoin]

Brother Brian is at well-deserved 14k already xD! Love this vid

[@briandesign]

Appreciate it!

Thank you for the clean and the practical solution!

[@valbonite5389]

Damn I was just looking for modal tutorials for my React portfolio. Brian clutch!!!

[@briandesign]

aye thanks Val

[@sthefanocarvalho2823]

Awesome. Solved my problem. Thanks again, Brian

[@georgemoayi]

Ah yes we already kno Issa hit. Preciate da vid Brian I needed it

[@briandesign]

awesome thanks!

[@chalermkhwannasritha7431]

yayyyy, thanks Brian!

[@damislav]

Thank you. Very easy to understand

[@ikmalshahzan2480]

Thanks brian ! I really need this on my project

[@briandesign]

nice!

[@tinalee8686]

Thanks you! Helped a lot

[@80Vikram]

Thanks for your awesome efforts, kindly take care of background noise. God bless you man

[@lucasbertoldo5062]

Thank you very much, man! You saved me

[@ebjrtux]

Congrats, great job!!!

[@briandesign]

Thanks Edson!

[@charliebrewer1668]

Thanks again!!!

[@wijaksanapanji]

Love it❤️

[@briandesign]

Thanks!

[@pawels8040]

Very nice , thanks mate !!

[@briandesign]

Thanks Pawel!

[@InverserPro]

Thank U, bro!

[@aileen55]

You're so entertaining to watch hahaha

[@edmundodominguezagurcia7254]

Excellent video!

[@briandesign]

Thanks

[@Krentiles]

Thank you!

[@ZEESHANJUNAID2222]

Looks great. I have used react-modal with one of my nextJS project and the only thing i had to figure out was the animation on modal close. I think there's props named closeTimeoutMS which allow modal close delay and we can add animations when modal closes. Nice work though :)

[@briandesign]

nice! yeah I wanted to make one from scratch, but react-modal pretty much does the same thing

[@Dzirmal]

Thanks, Great Job.!!!

[@briandesign]

Thanks!

[@surendrareddyseelam9757]

You are awesome dude

[@briandesign]

Thanks!

[@MaltonCanada]

Thanks brother

[@rangabharath4253]

awesome :)

[@briandesign]

Thanks Ranga!

[@alekseytrump1586]

Super Dev!))))

[@briandesign]

Thanks

[@rayvincentdelacruz8251]

Nice bruh!

[@briandesign]

Thanks 🔥

[@infoberitabola7826]

Nice tutorial !!! Greeting from Indonesia

[@briandesign]

Thanks!

[@meredithjones7534]

Thanks for the awesome tutorials! They have been a huge help building up my portfolio! I hit a blocker on this one though, no matter what I've tried I cannot install the react-spring package. I use npm and tried what you did in the video, tried installing globally, and tried installing --save with no luck. Any suggestions for a workaround?

[@sarangkumar3803]

Can you explain, Why you used useCallback hook and its reference in useEffect hook as a dependency? Thanks in advance.

[@markaguilar736]

very usefull

[@alexgreen3630]

Thanks bro

[@denisvradiy8503]

nice video! please do more react videos)

[@briandesign]

I got a new react website vid dropping tomorrow

[@jonathanm.5813]

Thanks, I tried with NextJS ton include modal animation but useSpring and animated doesn't work for me. Any tip to adapt it ?

[@dixondeuxyeux]

Hello Brian, get tutorial. I have used modals in html projects. This looks far more difficult to code and I also wanted to ask how does one use multiple modals with different images and text on a page?? Many thanks

[@longbka]

Can you make these tutorials an dashboard admin with styled component

[@litsoschastlivyy7002]

hey man sweet video could you do one on how to link your modal to a table

[@hariace08]

How can we trigger the modal without a Button? For example every time a user logs in, a model appears after few sec on the landing page .

[@makak360]

Hy dudes , for me img don't display with relative or absolute path , anyone have an idea ?

[@goresometimes3528]

Not sure if anyone will see this but I did this tutorial and the image wasn't rendering and I'm not sure what I missed. I followed it to a T and couldn't figure out why the image was broken. Would appreciate any help. Thank you.

[@swevos7632]

Hello, what do you use as extension to have this kind of colors ?

[@jhonvaron1721]

Hello friend, how do you make the stylecomponent code look like this for you and not like it looks like a string for me?

[@EzeJ99]

I love you so much man (no homo), thanks to you i can finish my personal website. Greetings from Argentina!

[@tonymathew9469]

Hi @Brian, great tutorial! Could you also tell us how we could make this responsive for smaller screens? It would really help, thanks!

[@raphaeltorsu8655]

I think with a few media queries, it should be plausible

[@rahulvirat7859]

Nice bro

[@briandesign]

Thanks

[@eddyed3212]

what if this modal should updated the environment that it is triggered from, then it will make the modal close, and it is not the behaviour that you may want

[@Merig93]

You could render the modal conditionally directly in App, by doing {showModal && }. This way you dont need to pass showModal as a prop and it's cleaner imo.

[@briandesign]

that works too! you could also just add onClick={e => e.stopPropagation()} on the Modal div and remove the useRef completely and it still would work. I just wanted to show useRef for this example

[@JoaomdvFerreira]

Another smooth video man! Clean and simple just how we like it. A quick question regarding the styled components, as fine as they look like and the perks that comes within, they have a gigantic downside for me, browser console debugging. I've found a way to give them the classes that i want but it feels like an unnecessary use of code lines. Just wanted to know from your experience what's actually worth more in the long term: Styled Components or Normal Html?

[@briandesign]

depends how simple your project is. You could try coding it up with regular html and css, then convert it into styled components after if it's hard to tell what is what

[@mohammedirfan-us6cf]

Big fan ...love from india

[@briandesign]

Thanks Mohammed!

[@mohammedirfan-us6cf]

@@briandesign 🙌

[@synaxreader9326]

On @21:13, I got an error in my console stating: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:....etc. I am buffled as to the reason why? Do you have any suggestions?

[@aistetamosauskiene1234]

Thank you for the video. Have a question: Modal component has showModal and setShowModal props, what are the types of those props?

[@jabulaniemmanuelshili505]

my guess would be one is a boolean and one is a function , as in showModal is a boolean and setShowModal is a function.

[@Arundhativlog]

I used this pop-up and I want to remove body scroll when pop-up is opened, can You please help?

[@ememobongumoren]

I know it's been three months since you uploaded the video, very nice tbh!!. But what how do i go about a displaying a modal popup on site load using react

[@therevenant9296]

I need to implement this in my Navbar. I tried and the modal seems to misalign from page.

[@mbilal02]

Hello Respected Sir, Please make a water ripple effect on the background banner/header/hero image video in react js please sir

[@dhimasdhias22]

another cool tutorial, thanks, Brian! anyway, would you consider doing a Contact Form using React and Firebase? :D

[@briandesign]

Possibly!

[@dhimasdhias22]

@@briandesign cant wait for it 🤣

[@lennygonzalez2293]

Awesome Videos!! I was wondering if you could include display content over react-icons (using styled components) in one of your tutorials??

[@briandesign]

display content over react icons? I'm not sure what you mean

[@lennygonzalez2293]

@@briandesign Sorry for explaining it poorly... I meant when you hover over an icon and display text. Also thank you for responding thats awesome

[@shayanjafari1935]

hello when i use the styled component they show green and the snippet is off what should i do??????

[@briandesign]

add the extension vscode-styled-components

[@saivivekravi4979]

Can you make these toutorials with materialui as many are waiting for this

[@saivivekravi4979]

Please reply

[@sivaganesh4489]

pls do more videos on react design

[@briandesign]

will do!

[@minhtriha1222]

Thank Brian. Well done! But I still stuck at closing animation( the modal flow up then disappear). Can you help me and everybody here to solve this

[@briandesign]

are there any errors in your console? or do you mean the animation doesn't work at all?

[@minhtriha1222]

@@briandesign Your code works well. I mean an additional animation when closing the Modal. In fact, the Modal immediately disappears when showModal: false. Would you consider adding a disappear animation for the Modal. I mean the Modal floats from middle to top of the page(opposite direction of showing Modal). I tried to add some css animation when showModal: false but the state immediately sets false and no animation happens, just disappear.

[@colorfilter2046]

@@minhtriha1222 I'm thinking about the same problem. Have you found a solution? If so, please share it with me.

[@shubhammetkar6021]

Is it responsive?

[@RemsterHD]

Awesome tutorial! Would you consider doing something similar but when you click on the modal you are able to switch between photos?

[@briandesign]

like a photo gallery?

[@RemsterHD]

@@briandesign Yeah I was thinking where you have a project modal, once hovered, it will show the "learn more" then you click on it then the modal will open and then within that modal it would have some details about the photo you are looking at. Also give the user the ability to click through the photos and then depending on the photo the user is viewing the text/details of the photo change as well. This is defiantly more advanced but would be awesome to see!

[@Nathan-pu9um]

just wandering how to stop scrolling if say you clicked the modal half way down the page in another section

[@sreekar_s]

On launching the modal, execute this: document.body.style.overflow="hidden" On close, execute this: document.body.style.overflow="visible" Hope this is what you are looking for

[@arundhati7163]

@@sreekar_s Can you pls share the short video On launching the modal, execute this: document.body.style.overflow="hidden" On close, execute this: document.body.style.overflow="visible"

[@PwnUrBadCock]

Big thanks for this video man. However, I faced one issue while working on my project. Inside of return function I have a map method, which takes a lot of pokemon cards, each card has a learn more button. The idea was to create a Modal which will be individual for each pokemon card. However, when I click learn more button, Modal opens up and always showing the very last pokemon information. Probably because initial render occurs instantly after the npm start, and all modals are taking the very last item from the map. Can you please make a tutorial on how to use Modal inside of the map? Maybe internet shop with different items where each item has it's own Modal. That would be awesome! Cheers!

[@briandesign]

yeah I can make one in the future. It sounds like an image gallery design would replicate what you're trying to do. Basically you click on an image and it only shows that specific one. I made something similar with regular javascript, but I'd have to refactor it in react

[@PwnUrBadCock]

@@briandesign That's a big hint! I will try to Google image galleries powered by react.

[@yuricavalini3718]

Hello, Brian! First, thank you for this tutorial! I really enjoy your channel. I'm getting warning message in the console about memory leak: "Warning: Can't perform a React state update on an unmounted component..." I tried to solve this, but didn't figure out how to handle this yet. As I can see you tried to manage it by passing a return statement in the useEffect. Are you or anyone else having this issue?

[@briandesign]

check my github code and see if you mistyped something

[@yuricavalini3718]

@@briandesign I did. Seems like it's an issue because of react's version and react-spring. Still don't know why this is happening, but removing the element solved the issue. Thank you.

[@papichongogamer6144]

Great! Only you mist hover function 🤭

[@80Vikram]

Nothing is UP in morning time, only after 21:00

[@soniakashyap6261]

My Img is not showing can u tell me where is the prob

[@damislav]

add .default after brackets

[@vijuvaghish2592]

why you use require for img in modal.

[@briandesign]

react has issues with regular imports, so I use require to get the image. If that doesn't work, you can always go to the top of file and import {Image} from './modal.jpg' then pass 'Image' for the src like and that should work as well. If you just search on stackoverflow you should see a bunch of examples using the import {Image} from 'imagelink'. There's a few alternatives as well, but this should work. If not let me know

[@JounitoJons]

Portals?

[@briandesign]

yeah you could use portals too, but I wanted to keep this template simple so people can refactor and add extra things

[@dhanushr6172]

Is that modal responsive?

[@briandesign]

this just shows the open/close functionality

[@dhanushr6172]

@@briandesign thank you

[@LarsRyeJeppesen]

This is not lazy loaded.