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 :)

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

[joza]

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

[rachelperkins]

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!

[valbonite]

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

[ikmalshahzan]

Thanks brian ! I really need this on my project

[ArcherJ]

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.

[sthefanocarvalho]

Awesome. Solved my problem. Thanks again, Brian

[earthycoin]

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

[dearesthui]

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

Thank you for the clean and the practical solution!

[rohitagni]

This is just what I wanted. Cheers man !

[jiwanjeon]

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

[Vikram]

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

[ZEESHANJUNAID]

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 :)

[ansulp]

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

[anuragk]

Amazing tutorial. absolutely loved it.

[Arundhativlog]

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

[aileen]

You're so entertaining to watch hahaha

[denisvradiy]

nice video! please do more react videos)

[sarangkumar]

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

[georgemoayi]

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