Build A Custom React JS Modal - Using Hooks (Pop-up Window)

Build A Modal in React! In this video I will share with you how to build a custom modal (pop-up) in React JS. We will be using the useState hook to toggle our modal and custom css for the styling. The stopPropagation function is implemented to be able to close the modal by clicking outside of the modal! Hope you guys like it and thank you for watching - feedback welcomed!
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
👨‍💻 Github 👨‍💻
github.com/fireclint/react-modal
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
☕ Buy me a Coffee ☕
www.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint

[@allanfernz9356]

Thank you! This was exactly what I was looking for! Simple and concise! New Sub!

[@davidfedchuk4483]

Helped me get past a bug i've been stuck on for a minute. Thank you!

[@onthegocode1443]

Great video! I'm using this to build out my portfolio website and this is a big help!

[@eliud_karuga]

clear concise and put in an easy way. this is the best one

[@Coastony]

Nice! Thank you soo much!

[@melissag3793]

Clear & concise, thank you! 🏆

[@codecommerce]

Thanks Melissa!

[@cryptonicchronic8111]

watched a lot of tutorials, your fast but clear and explain it easy enough to understand. thanks video rocks

[@codecommerce]

Means so much - thank you!

[@fernandogomez5760]

Capo!!!! bien explicado, simple y SIN librerias!!!!

[@salimnihat6966]

Thanks!!. That was awesome

[@fola_azeez]

Thank you. This is amazing

[@dagi_works]

Your videos have taught me a lot man, thank you!

[@codecommerce]

Thank you dude that’s so awesome to hear!

[@rammartinez6873]

thank you super effective!

[@user-vu9dl3vn7l]

Thank you so much for this helpful video!

[@Gajanan19]

Really Great video champ. Thank you! 🏆

[@roxanaandra]

Very good, really helped me!

[@shahtaz9385]

Thanks man! That was so soothing!

[@codecommerce]

Thank you!

[@MsDeadParrot]

Thank you ! This was very clear !

[@codecommerce]

Thank you!

[@viniciusm.m.7822]

Exactly what i need! Thanks man! Abraço!

[@codecommerce]

No problem!

[@ulisesmak]

this kind of video are so helpful, tranks man!

[@codecommerce]

Happy to help!

[@rain25348]

thank you , help me a lot!!

[@harny7121]

thanks alot man. super fan

[@rbmax33]

Thank you man it is awesome. I appreciate it

[@codecommerce]

Thank you sir!

[@prabasri6598]

You are a saviour!

[@sylvesterpromise3300]

You just got a new subscriber 🙂

[@shutterbugtraveller1004]

Thank you!

[@devennandapurkar7786]

this is was really cool!

[@codecommerce]

Thank you dude!

[@ABC-el3ql]

HI. I'm a S.Korean fan of yours. Your video is very useful to me. Especially, the tip for part 'stopPropagation()' was very good. Thank you so much!

[@codecommerce]

Dude that's awesome! Thank you. for that. Yes - I was banging my head until I discovered stopPropagation :)

[@mdwaliullah9609]

A lot of thanks

[@mantech560]

Thank you, this is awesome!

[@codecommerce]

Thank you my friend!

[@mantech560]

@@codecommerce Uwc 🙌

[@fullkanks2644]

thank you so much you really saved my time

[@codecommerce]

Awesome!

[@faisalahmad100]

It’s a really really helpful video❤️❤️

[@codecommerce]

I'm so glad!

[@faisalahmad100]

@@codecommerce Thank you so much

[@kennedyfreitas7548]

thanks a bunch, will be applyng this one with context and some data coming from sanity

[@codecommerce]

Thank you Kennedy! I haven’t used sanity but it’s something I want to checkout soon!

[@kennedyfreitas7548]

@@codecommerce think you'll love it dude

[@lorem1541]

🔥🔥

[@nandopookey9195]

Thank you sir

[@codecommerce]

Thank you!

[@feastofsteven1214]

Great video as always, thanks man! I'm having some trouble getting the overlay to work because I am using this to display a menu that is nested in my navbar. So, the open icon is in Navbar.jsx, it opens the modal via Menu.jsx, and hence the 'overlay' only takes on the size of the menu and not the full background. Seems like this method only works if you build it directly in app.js, is that correct?

[@jritzeku]

Im guessing the stopPropagation() was needed because our modal content was nested inside the overly content?? I've seen prior modal examples where overlay and modal sit adjacently and hence never use stopPropagaion. However, I do like the nested order of things, seems seems more semantically correct and intuitive.

[@edboss36]

If I want to be a comment section of an app as a popup, will this method still be applicable (considering loading lots of comments on the pop up)? thanks

[@jeryngungan]

In my react code there is notification too many rerenders i cant fix it

[@BlazingTyphlosion]

Confirmation should always be on the right and cancellation on the left...

[@jonel5864]

Why is your open is automatic a varialble?

[@codecommerce]

For the sake of the video :)

[@mustafa.celiktas]

T H A N K Y O U U U U

[@pinguk9130]

Can we use this in tailwind css also?

[@codecommerce]

Absolutely

[@pinguk9130]

@@codecommerce can you help me make same with login and signup pop-up? I tried the login one but it did not work .

[@pinguk9130]

@@codecommerce I tried to make a login pop-up which overlay my home page of the website using tailwind CSS but it didn't work . Please help me