ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- Click Outside to Close - React Hook
#37 #dropdownmenu #react #tutorial #Click_Out_Side_to_Close
In the last video, we built a dropdown menu using React. It still looks good, but there is one problem. To close the menu, there is just the only way is clicking the trigger button again, which is not a great user experience. So in this episode, I will help you how to close the menu if we click outside of it, using React Hook
Check out my GitHub:
github.com/the...
Check out the dropdown menu - React tutorial right here:
1.Dropdown Menu - React Tutorial for Beginners
• Dropdown Menu - React ...
2.Click Outside to Close - React Hook
** This video **
Download and install Node JS right here:
nodejs.org/en/
🎵Track: Good Days - Yung Logos
TH-cam Library Audio
VERY GOOD, THIS GUY IS A COMPLETE TEACHER, CALM AND GOOD EXPLANATIONS, USING EXAMPLES TO BETTER UNDERSTANDING, AND YEA IM SPEAKING LOUD
I like the way you say it out loud :))
Very easy to understand with the extra animations and illustrations! You even explained everything in details (whilst not overtalking about it) which made it even better! Millions thanks to your great work!
You made my day already in less than 5 minutes, I've been trying this for more than a day, I had to learn event propagation, bubbling and capturing😢, But thanks dude ❤
Amazingly well made tutorial. From production to content. Quality content!
Thank you for making this video, it really helped me.
This video was really great. This model of explaining is unique for someone who is not well known on TH-cam. I hope to learn more from you.
I rarely comment, but thanks to this tutorial and your way of explaining it, things became clearer. Subscribed! 🔥🔥
Bro you helped me so much I couldnt figure it out for days! My mistake was placing the opening and closing button outside the div with the ref so it would open immediately after clicking the button again to close it.
the editing really helps me to understand the content, just like when u clicking the menu trigger u add some little text to demonstrate true or false, well done mate
This was super helpful! The tutorial was very clear and had great explanations
This video is very useful. I successfully applied this Thanks Bro Keep doing such content
Thanks a lot, it was very helpul for me, specially for understanding about why using every single part of the code. 👍
Short and sweet cool explanation 💕
Great Video, so informative and very professional, Thank you for you helps and dont stop making videos!
Thank you very much for the tip, it will solve my biggest problem of the day
Great video!!
Great video man, it's exactly what I wanted to know about it. Keep it going!!
Well explanation and super helpful
The Best, easy and quickly!!!
This helped me a lot! I'd love a draggable element tutorial!
omg , thank you was struggling on this for a while ...
Hope this useful for you :)))
You made it very easy thanks
lovely brother.. you helped me.. 😍
amazing vid! short and sweet, thank you
Amazing, thanks bro. I'm fully understand
Thanks for sharing on github your code, it was very helpful for my project )))
Amazing tutorial, this helps me a lot. Are bro come from Vietnamese ??
Thank bro :))) yes, Im Vietnamese
amazing content!! thanks a lot!! 😁😁
Its work. thank you.
Good and clean solution. Thanks.
Good work ! For sure more video like this one are necessary. Great explanations ! Thank you :)
Always seem to be coming back to this one
Thank you, just what I needed
hay quá bro ơi đúng cái tôi đang cần
Cảm ơn bạn nhé
Legend 👑
Thank you! That was Helpful.
Great video man, Keep it going!
Very helpful, thank you.
you made this look really simplw and understandable thanks a lot!👍
Thank you so much for your kind words and feedback!
@@TK-ot8dj hay can you make same video for class based component because i am trying to do the same but for every click on the home page it is calling clickhandlerOutside
Thanks man that was really helpful ❤
Grear tutorial, thanks !
Worked perfectly! Thank you!!
excellent, just keep going
Thanks for this video. It gave me a solution to my problem. Liked and subscribed.
I was getting an console error: Uncaught TypeError: Cannot read properties of null (reading 'contains')
at HTMLDocument.handler.
But if I wrapped the if statement with another if (menuRef.current) {
}, the error went away.
Thank you bro.
Thank You. This video really helped me
thx u so much!
Great video guy!!! Continue making more videos please. :)
thanks, this was really helpful
thanks a lot
Very helpful, thanks!
Nice explanation. I wonder if it would be better to use an empty dependency array for the useEffect instead of a clean-up function though
That's not how the empty array works, empty array only renders it once, it does not remove the functionality once the component is unmounted, so if you don't remove the eventListener, the outside click event might trigger even after the drop-down menu etc is hidden, I'm not exactly sure since I'm a beginner too but cleaning it up is always recommended
very helpful thanks!
Hey brother, thank you for this tutoial, your are the best
take love brother
Thnx bro
I think it's better to include an empty dependency array in the useEffect. Otherwise it's just gonna keep re-rendering everytime you click.
thankyou! it's really working man! thanks.. subscribing
Thanks
Very helpful video
really good video bro
Nice, thank you!
Informative
thank you so so much
Same like slide top menu which open from down to top show data also controle by slide it position like mobile app
why my warning is Cannot read properties of null (reading 'contains')
Probably useref not used properly
Why did you add ref to the menu-container.
I suppose when we click next to your profile icon, the drop-down doesn't close right?
Correct me if I am wrong.
Very good knowledge, are you Vietnamese?
Great video, one question, please make the font larger for me to watch on Smartphone. 🔥
thanks for your advice, i will do better in the next video
Thanks man!
Thanks Brother!
Thank you sooo soo soooo muchhh!!!!!!
thx for share it!
Very nice!
Awesome!
Thank you
Thanks!
thx for sharing
Do u do ur own css? It's Amazing!
Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video
th-cam.com/video/KROfo7vuIGY/w-d-xo.html
Thank you bro. One question, how to add some text below the main text of menu...for example any description
Excelent!
How would you go ahead and make this into a custom hook?
So it can be used with any kind of popup or sidebar or navbar?
Great question! To make this into a custom hook, you can extract the functionality of detecting an outside click and closing the menu into a separate function, which can be reused for any type of popup, sidebar or navbar.
Here's an example of how you can create a custom hook:
import { useEffect } from "react";
export const useClickOutside = (ref, callback) => {
const handleClick = (e) => {
if (ref.current && !ref.current.contains(e.target)) {
callback();
}
};
useEffect(() => {
document.addEventListener("click", handleClick);
return () => {
document.removeEventListener("click", handleClick);
};
});
};
Then, in your component where you want to use the custom hook, you can simply use it like this:
import { useRef } from "react";
import { useClickOutside } from "./useClickOutside";
const MyComponent = () => {
const ref = useRef(null);
const handleCloseMenu = () => {
// close your menu logic here
};
useClickOutside(ref, handleCloseMenu);
return (
// your menu component here
);
};
thank u bro
🔥
good that mate
Thank you!!😊
hay lắm a
cảm ơn em nhé :)))
thanks
спасибо! все понятно с первого раза.
probably we can use onBlur to implement click outside
Gracias !!!
If I click on one menu item then after visiting that page navbar should be closed.
Sooo good
how to close navbar after i click menu?????
Thank you so much...
Great
I have an error to : cont read a propities of undefined (reading 'contains')
why did you use mousedown event ,instead of click?
Excelletn! U got a like!
Thanks it was helpfull for me. In typescript add "as Node" -(GPT tell to do it) in "if (!formRef.current?.contains(e.target as Node))" how do you think is it norm practis?
I have no experience with TypeScript, but I plan to learn it in the near future :))
It doesn't close after clicking the menu item. Is it possible to fix?
yeah, you can fix this problem.
you can add an `onClick` event handler to each `DropdownItem` component. In this event handler, you can call the `setOpen` function to close the menu by setting `open` state to `false`.
function DropdownItem(props){
const handleItemClick = () => {
setOpen(false);
}
return(
{props.text}
);
}