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!

[@onthegocode1443]

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

[@davidfedchuk4483]

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

[@eliud_karuga]

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

[@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!

[@melissag3793]

Clear & concise, thank you! 🏆

[@codecommerce]

Thanks Melissa!

[@Coastony]

Nice! Thank you soo much!

[@fernandogomez5760]

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

[@rammartinez6873]

thank you super effective!

[@salimnihat6966]

Thanks!!. That was awesome

[@dagi_works]

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

[@codecommerce]

Thank you dude that’s so awesome to hear!

[@fola_azeez]

Thank you. This is amazing

[@user-vu9dl3vn7l]

Thank you so much for this helpful video!

[@viniciusm.m.7822]

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

[@codecommerce]

No problem!

[@Gajanan19]

Really Great video champ. Thank you! 🏆

[@roxanaandra]

Very good, really helped me!

[@harny7121]

thanks alot man. super fan

[@rain25348]

thank you , help me a lot!!

[@MsDeadParrot]

Thank you ! This was very clear !

[@codecommerce]

Thank you!

[@prabasri6598]

You are a saviour!

[@rbmax33]

Thank you man it is awesome. I appreciate it

[@codecommerce]

Thank you sir!

[@shutterbugtraveller1004]

Thank you!

[@shahtaz9385]

Thanks man! That was so soothing!

[@codecommerce]

Thank you!

[@ulisesmak]

this kind of video are so helpful, tranks man!

[@codecommerce]

Happy to help!

[@mdwaliullah9609]

A lot of thanks

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

[@sylvesterpromise3300]

You just got a new subscriber 🙂

[@devennandapurkar7786]

this is was really cool!

[@codecommerce]

Thank you dude!

[@lorem1541]

🔥🔥

[@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!

[@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

[@faisalahmad100]

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

[@codecommerce]

I'm so glad!

[@faisalahmad100]

@@codecommerce Thank you so much

[@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.

[@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?

[@nandopookey9195]

Thank you sir

[@codecommerce]

Thank you!

[@jeryngungan]

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

[@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

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

[@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

[@mustafa.celiktas]

T H A N K Y O U U U U