React click outside to close

preview_player
Показать описание
Registering click outside event (click-out) using references (useRef) and useEffect. The event is registered on body and added and removed when the component mounts/dismounts.
The example represents a dropdown menu with a click outside event to close it.

00:00 - Intro
00:16 - Button click event
01:36 - Click outside event
04:28 - useRef to make it perfect
05:31 - Test and outro
  1. Coding With Dawid
  2. react click outside
  3. react click outside component hook
  4. reactjs click ouside
  5. reactjs click out
  6. react click outside to close
Рекомендации по теме
Click Outside to 0:06:37

Click Outside to Close - React Hook

Click Outside to 0:09:15

Click Outside to Close - React Hook

React click outside 0:05:38

React click outside to close

Detect Outside Click 0:04:19

Detect Outside Click for Any Element in ReactJS | Most Easiest Method

Detect Clicks Anywhere 0:12:10

Detect Clicks Anywhere on a Page in React

#35 Click outside 0:09:18

#35 Click outside to close in REACT JS -BUILD THE BEST FACEBOOK CLONE EVER (MERN STACK) 2022

Detect Click Outside 0:05:11

Detect Click Outside Element | React hook | useClickOutside

How to close 0:11:19

How to close a modal when clicking outside it in React

Create a Click 0:03:54

Create a Click Outside Hook in React

Make a Modal 0:22:24

Make a Modal in React using Hooks (Submit/Close/Click Outside)| Beginner Tutorial

How to detect 0:07:06

How to detect outside click in React | React JS

Click Outside to 0:09:25

Click Outside to Close Modal | Close HTML dialog Element by Clicking Out

Click outside to 0:08:37

Click outside to close modal in React | Close dialog on clicking outside

React Modal | 0:13:58

React Modal | Click Outside to Modal Close - React Hook | Frontend Interview Questions

Creating a Custom 0:08:23

Creating a Custom useClickOutside Hook in React

react js bootstrap 0:14:11

react js bootstrap modal popup open close click outside

How to Close 0:01:42

How to Close Popup by Clicking Outside the Box

How to detect 0:06:15

How to detect outside click in a React Component || Hindi

Click outside to 0:04:54

Click outside to close the modal - React hook and TailwindCss

EASIEST Click Outside 0:06:30

EASIEST Click Outside function to close menu with HTML, CSS, JavaScript

How to detect 0:10:31

How to detect a click outside of a React Component (16.8+)

react native close 0:01:20

react native close modal on click outside - #clips

Outside Click Handler 0:05:35

Outside Click Handler React

Close modal. on 0:00:58

Close modal. on clicking outside element using vueuse core #vue composition api

Комментарии
Автор

Thanks for concise and easy to follow tutorial! Very helpful.

gerwinbaula
Автор

Thank you for this easy and wonderful tutorial. This helped me!

samyogdhital
Автор

In the last meetin I had this ref using was asked to me, I wish I would have watche this tutorial before...

It is quite clear, Thank you

YusufSalahAdDin
Автор

Is there github link for this code? Also the path property for event does not exist in FireFox, so it might be worth using a different property for identifying the node.

Curaaheevil
Автор

Great video, however when i have multiple drop downs, i am unable to use another useRef for the new drop down, can u suggest a fix?

athulgeorge
Автор

when i click option 1 or 2, 3 then option display:none. how to fix display:block

mobilegendsbangbang
Автор

i knew all those methods and hooks and already used in many occasion, but I just couldn't put all the pieces together to solve the problem which is closing the dropdown on click outside that's why I watch this vid, how about you?

flowerofash
Автор

Thank you for this easy and usefull tutorial. how we can get your source code pls

dzlifestyle
Автор

what extension are you using to diplay what type or description of a parameter in a function, useState(initialstate: )

bruh
Автор

What if there are 10-15 drops down on the page?how do you handle in that case?

shivampurohit
Автор

seems like a lot of code, why not use ref and focus?

caseytrombley
Автор

it found only a button but if the button contain svg or other htmlelement not found correctly.

YonatanVigilioUsa
Автор

❤Thank you Thank you Thank you Thank you Thank youuuu!

Djoako