Amazingly well made tutorial. From production to content. Quality content!

This was super helpful! The tutorial was very clear and had great explanations

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

Great video man, it's exactly what I wanted to know about it. Keep it going!!

This video was really great. This model of explaining is unique for someone who is not well known on KZread. 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! 🔥🔥

Good work ! For sure more video like this one are necessary. Great explanations ! Thank you :)

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!

Great Video, so informative and very professional, Thank you for you helps and dont stop making videos!

This video is very useful. I successfully applied this Thanks Bro Keep doing such content

Short and sweet cool explanation 💕

amazing vid! short and sweet, thank you

Great video man, Keep it going!

Great video guy!!! Continue making more videos please. :)

Thanks a lot, it was very helpul for me, specially for understanding about why using every single part of the code. 👍

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.

Thanks for sharing on github your code, it was very helpful for my project )))

Hey brother, thank you for this tutoial, your are the best

Thank you, just what I needed

Thanks man that was really helpful ❤

Thank you very much for the tip, it will solve my biggest problem of the day

This helped me a lot! I'd love a draggable element tutorial!

VERY GOOD, THIS GUY IS A COMPLETE TEACHER, CALM AND GOOD EXPLANATIONS, USING EXAMPLES TO BETTER UNDERSTANDING, AND YEA IM SPEAKING LOUD

@TK-ot8dj

11 ай бұрын

I like the way you say it out loud :))

Well explanation and super helpful

Good and clean solution. Thanks.

thankyou! it's really working man! thanks.. subscribing

The Best, easy and quickly!!!

Thank you! That was Helpful.

Amazing, thanks bro. I'm fully understand

Grear tutorial, thanks !

Worked perfectly! Thank you!!

Very helpful, thanks!

Thank You. This video really helped me

thanks, this was really helpful

Very helpful, thank you.

Thanks for this video. It gave me a solution to my problem. Liked and subscribed.

@ElyBourland

Жыл бұрын

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.

very helpful thanks!

You made it very easy thanks

omg , thank you was struggling on this for a while ...

@TK-ot8dj

Жыл бұрын

Hope this useful for you :)))

really good video bro

amazing content!! thanks a lot!! 😁😁

Thanks Very helpful video

Thanks for the video ✨

Nice, thank you!

Its work. thank you.

Thanks man!

Very nice!

lovely brother.. you helped me.. 😍

Thank you bro.

excellent, just keep going

Thanks Brother!

thx u so much!

Thank you sooo soo soooo muchhh!!!!!!

Awesome!

thx for share it!

Thank you

Thank you!!😊

Thanks Man

thank you so so much

you made this look really simplw and understandable thanks a lot!👍

@TK-ot8dj

Жыл бұрын

Thank you so much for your kind words and feedback!

@rohitrawat5536

Жыл бұрын

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

Informative

thx for sharing

thank u bro

thanks a lot

Thnx bro

Always seem to be coming back to this one

Excelent!

Thank you bro. One question, how to add some text below the main text of menu...for example any description

Excelletn! U got a like!

take love brother

Sooo good

Thank you so much...

good that mate

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

@blackpurple9163

Жыл бұрын

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 good knowledge, are you Vietnamese?

Gracias !!!

thanks

hay quá bro ơi đúng cái tôi đang cần

@TK-ot8dj

10 ай бұрын

Cảm ơn bạn nhé

Amazing tutorial, this helps me a lot. Are bro come from Vietnamese ??

@TK-ot8dj

Жыл бұрын

Thank bro :))) yes, Im Vietnamese

Great

why my warning is Cannot read properties of null (reading 'contains')

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.

спасибо! все понятно с первого раза.

For me I have to add condition that is modal open before addevent listener, if I don't have a condition, useEffect will not remove EventListener , I don't know why this has happened.

Why did you not put empty dependecy array in useEffect??

but if i have more than one dropdowns? one dropdown is opened and i click on other dropdown. can i closed first and opened second dropdown?

probably we can use onBlur to implement click outside

Great video, one question, please make the font larger for me to watch on Smartphone. 🔥

@TK-ot8dj

Жыл бұрын

thanks for your advice, i will do better in the next video

Do u do ur own css? It's Amazing!

@TK-ot8dj

Жыл бұрын

Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video kzread.info/dash/bejne/fYaDyNFwptivd7w.html

🔥

I have an error to : cont read a propities of undefined (reading 'contains')

hay lắm a

@TK-ot8dj

Жыл бұрын

cảm ơn em nhé :)))

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.

is it still ok if use click event? not mousedown?

why did you use mousedown event ,instead of click?

If I click on one menu item then after visiting that page navbar should be closed.

how to close navbar after i click menu?????

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?

@TK-ot8dj

Жыл бұрын

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 ); };

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?

@TK-ot8dj

11 ай бұрын

I have no experience with TypeScript, but I plan to learn it in the near future :))