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!
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
@@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!
@@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.
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!
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.
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 :)
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.
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
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?
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
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?
@@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.
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
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?
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 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.
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
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.
@@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!
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!
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
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
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
@@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"
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
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
me too...
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!
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
@@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!
@@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.
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!
React is great for super beginners. Less so for experienced ...
Thanks brian ! I really need this on my project
nice!
Brother Brian is at well-deserved 14k already xD! Love this vid
Appreciate it!
Damn I was just looking for modal tutorials for my React portfolio. Brian clutch!!!
aye thanks Val
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.
Awesome. Solved my problem. Thanks again, Brian
Thank you for the clean and the practical solution!
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 :)
nice! yeah I wanted to make one from scratch, but react-modal pretty much does the same thing
Thanks for your awesome efforts, kindly take care of background noise. God bless you man
Thanks for this tutorial. Really helpful for what I need. Keep up the good work.
This is a very good tutorial for beginners! I really appreciate your effort!!!
Thank you. Very easy to understand
You're so entertaining to watch hahaha
Thanks again!!!
This is just what I wanted. Cheers man !
Amazing tutorial. absolutely loved it.
nice video! please do more react videos)
I got a new react website vid dropping tomorrow
Thank you!
Thanks brother
Thank you very much, man! You saved me
Thanks you! Helped a lot
Thanks Brian, awesome work. Looking forward for more React videos 👍
Thanks Ansul!
Thank U, bro!
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.
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
Can you explain, Why you used useCallback hook and its reference in useEffect hook as a dependency? Thanks in advance.
Nice tutorial !!! Greeting from Indonesia
Thanks!
Excellent video!
Thanks
Can you make these tutorials an dashboard admin with styled component
I used this pop-up and I want to remove body scroll when pop-up is opened, can You please help?
Ah yes we already kno Issa hit. Preciate da vid Brian I needed it
awesome thanks!
Very nice , thanks mate !!
Thanks Pawel!
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?
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
Hi @Brian, great tutorial! Could you also tell us how we could make this responsive for smaller screens? It would really help, thanks!
I think with a few media queries, it should be plausible
You are awesome dude
Thanks!
Congrats, great job!!!
Thanks Edson!
Love it❤️
Thanks!
Big fan ...love from india
Thanks Mohammed!
@@briandesign 🙌
hey man sweet video could you do one on how to link your modal to a table
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?
Can you make these toutorials with materialui as many are waiting for this
Please reply
very usefull
Hello friend, how do you make the stylecomponent code look like this for you and not like it looks like a string for me?
Thanks, Great Job.!!!
Thanks!
Super Dev!))))
Thanks
yayyyy, thanks Brian!
Nice bro
Thanks
I need to implement this in my Navbar. I tried and the modal seems to misalign from page.
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
are there any errors in your console? or do you mean the animation doesn't work at all?
@@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.
@@minhtriha1222 I'm thinking about the same problem. Have you found a solution? If so, please share it with me.
Awesome Videos!! I was wondering if you could include display content over react-icons (using styled components) in one of your tutorials??
display content over react icons? I'm not sure what you mean
@@briandesign Sorry for explaining it poorly... I meant when you hover over an icon and display text. Also thank you for responding thats awesome
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
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 .
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?
Nice bruh!
Thanks 🔥
Great! Only you mist hover function 🤭
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?
check my github code and see if you mistyped something
@@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.
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
Thanks, I tried with NextJS ton include modal animation but useSpring and animated doesn't work for me. Any tip to adapt it ?
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.
I love you so much man (no homo), thanks to you i can finish my personal website. Greetings from Argentina!
awesome :)
Thanks Ranga!
Awesome tutorial! Would you consider doing something similar but when you click on the modal you are able to switch between photos?
like a photo gallery?
@@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!
Thank you for the video. Have a question: Modal component has showModal and setShowModal props, what are the types of those props?
my guess would be one is a boolean and one is a function , as in showModal is a boolean and setShowModal is a function.
another cool tutorial, thanks, Brian!
anyway, would you consider doing a Contact Form using React and Firebase? :D
Possibly!
@@briandesign cant wait for it 🤣
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!
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
@@briandesign That's a big hint! I will try to Google image galleries powered by react.
Hello, what do you use as extension to have this kind of colors ?
pls do more videos on react design
will do!
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
Nothing is UP in morning time, only after 21:00
Hy dudes , for me img don't display with relative or absolute path , anyone have an idea ?
Is it responsive?
hello when i use the styled component they show green and the snippet is off what should i do??????
add the extension vscode-styled-components
My Img is not showing can u tell me where is the prob
add .default after brackets
Hello Respected Sir, Please make a water ripple effect on the background banner/header/hero image video in react js please sir
just wandering how to stop scrolling if say you clicked the modal half way down the page in another section
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
@@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"
why you use require for img in modal.
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
This is not lazy loaded.
Portals?
yeah you could use portals too, but I wanted to keep this template simple so people can refactor and add extra things
Is that modal responsive?
this just shows the open/close functionality
@@briandesign thank you
Thanks bro