Build a POPUP component in React JS ~ A Beginner Tutorial with React Hooks!
HTML-код
- Опубликовано: 11 янв 2021
- Learn how to build a popup component for React JS by using React Hooks and functional components. We build a timed popup that opens after an option amount of time and we create a button triggered popup as well using the same component.
// JOIN MY DISCORD
/ discord
// Support me on Ko-Fi
ko-fi.com/tylerpotts
// FOLLOW ME ON TWITTER
/ tyler_potts_
// BECOME A MEMBER
ruclips.net/user/tylerpottsjoin
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
Really amazing, along with popups, learnt many new things also. Thanks 😊😊🙏
Glad to hear that 🙌
Bloody Hell mannnnn that's the best tutorial I have ever seen I was tired of using the react-modal thanks for the tutorial.
Awesome video! Super well explained! thank you!
Tyler, you are amazing! I'm going to binge your videos to learn more about web-design! I love you!
Haha! I'm happy you like them! I hope you find them useful, Emma! :D
I was searching for this and you made this so simple😍
Glad I could help!
Very helpful and easy to follow!
Lovely video, very clear and well explained.
I'm glad you enjoyed it!
i learned something today thanks to you dude i love it
Worked for me. Thank you for the help.
what a wonderfull video man, and youre so didactic, i learned a lot from this video, thanks and keep the awesome work!
Woaw Tyler, that amazing work! Well done, helped me a shiton!
Glad to hear it!
thx too much for this video. I didn’t know that you can pass a set function in props to another component, this is very cool!
Thanks for this video. It helped me a lot.
Yaayyy! More react! ❤️❤️
amazing. helped me a lot!
Bro you are my secret teacher now. You deserve the subscribe sir.
Thank you so much for this!!
Amazing, helped me a lot.
Thanks dude for your understandable and easy tutorial
Happy to help
Thanks for great content!
clean and simple lovet it
Awesome as always 👍😀
Thanks again! haha xD
Hey Bro, I'm beginer with React Js and u help me a lot with your video. U are the best !!! 👏🏻👏🏻👏🏻
Happy to hear that!
Excellent,
Thanks for share it
Thank you very much your video was really helpful
Thanks so much, this is awesome!
Glad you like it!
great work on this! got a new subscriber
Awesome, thank you!
Nice one, thank you.
Just AWESOME!!!
Thanks
it helped me a lot! thanks
Glad it helped!
Of course, it works. Thanks a lot.
Thank you so much !!
You're welcome!
Thank you!
Excelent, thank you.
Thanks!
cool stuff
Thank U, bro!
very useful informations thanks
Glad it was helpful!
Thanks for the tutorial! ☺
Anyone out there trying this out in a .tsx file and getting a compile error "return type 'Element | ""' is not a valid JSX element", just make it a .js file instead
thanks for nice explanation, which theme are you using
refresh refresh refresh 😂. you have got a new subscriber thanks for the tutorial
Awesome, thank you!
How can we do if we just want to just dismiss the popup by clicking outside of it and not on the "close" button please ? Great content by the way !
amazing video
Glad you think so!
Estaria bueno que hicieras uno en el que se pudiera agregar el setTimeout y el boton en el mismo popup y no en dos diferentes.
THANKS A LOT
You're welcome!
Awesome 👌 nice work continue 👏
What's the name of VS Code theme?
you rock! Please make a video on animations too
Thanks for the idea!
This is easy. I'd like a tutorial on how to make a reusable component with dynamically changing data in the popup.
good video
I not even watched the whole video and got the answer i was looking for. Sometimes we just need to step out from the code for just a second. Either way i gave it a like for the video. Thanks man
Thank you!! Glad you found what you was looking for :D
what theme are you using in your vscode bro?
Perfect video 5/5
Thank you
super :)
Super!
1000000000 thanks
i am currently following this tutorial now, but my setTrigger function is not working. I don't know where the problem is coming from. kindly help
i want a popup with multiple buttons and different content but don't like the look of what i have here, can you help?
can you explain for me where is the ''trigger'', thanks you for answer me!
thank you. how would you pass a variable into the popup window? i want to display the full image like In Instagram when you click it.
I would use a custom state/prop to pass it through with the data you need
hod do i position it within a certain conytainer
Can you make a video on tour guide tooltip.. Please
this is library for popup...cause this ain't working for while name is changed.... I am using two popup in same page but the 2nd popup using in new file isn't working fine(not able to import in working file) please reply??
What's theme WSCode?
ang husay po (tagalog).
which theme is it ?
Nycc
Hi, so I have a progress bar and when i click on it it should give me a pop up. Can anyone help?
I followed the tutorial, but the close button is not working. It may be important to mention that “props” is never italicized for me.
Edit: nevermind, I forgot the setTrigger part in App.js
4:00 Hahaha if this is not global first approach to fixing any error in frontend... :D
your english communicate is very easy to hear, especially not good english likes me, i wonder do u have any course about front end by your teach ?, i'm from Viet Nam
my close button doesnt work
please help
How do you make it responsive?
just style the popup and popup inner component using css
I keep getting an error saying props.setTrigger is not a function. Can you help?
I'm getting the same thing, were you ever able to figure this out?
nvm lol I got it, it was because I forgot to add setTrigger={setButtonPopup} to the Tag
wheres git with source?
Tyler do you know these bots in the comments?
where is the code bro?
ok
So Nice 💘💘💘💘💘💘
It doesnt work anymore.
Need lovely 😍💋 💝💖❤️
Someone who makes a react tutorial but cannot put the link to the code in the description does not deserve a like
I'm single 😥😥😥😥😥
also i am
Great
Thank you!
You're welcome!