click outside React component
const componentRef = useRef(); useEffect(() => { document.addEventListener("click", handleClick); return () => document.removeEventListener("click", handleClick); function handleClick(e: any) { if(componentRef && componentRef.current){ const ref: any = componentRef.current if(!ref.contains(e.target)){ // put your action here } } } }, []);
Source: stackoverflow.com
react click outside
import React, { useRef, useEffect } from "react"; /** * Hook that alerts clicks outside of the passed ref */ function useOutsideAlerter(ref) { useEffect(() => { /** * Alert if clicked on outside of element */ function handleClickOutside(event) { if (ref.current && !ref.current.contains(event.target)) { alert("You clicked outside of me!"); } } // Bind the event listener document.addEventListener("mousedown", handleClickOutside); return () => { // Unbind the event listener on clean up document.removeEventListener("mousedown", handleClickOutside); }; }, [ref]); } /** * Component that alerts if you click outside of it */ export default function OutsideAlerter(props) { const wrapperRef = useRef(null); useOutsideAlerter(wrapperRef); return <div ref={wrapperRef}>{props.children}</div>; }
Source: stackoverflow.com
react click outside class implementation
import React, { Component } from 'react'; import PropTypes from 'prop-types'; /** * Component that alerts if you click outside of it */ export default class OutsideAlerter extends Component { constructor(props) { super(props); this.wrapperRef = React.createRef(); this.setWrapperRef = this.setWrapperRef.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); } componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } /** * Alert if clicked on outside of element */ handleClickOutside(event) { if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) { alert('You clicked outside of me!'); } } render() { return <div ref={this.wrapperRef}>{this.props.children}</div>; } } OutsideAlerter.propTypes = { children: PropTypes.element.isRequired, };
Source: stackoverflow.com
outside click react
import { useEffect, MutableRefObject } from 'react' export const useOutsideClick = <T extends Array<MutableRefObject<any>>>( ref: T, callback: () => void ): void => { useEffect(() => { const handler = (event: MouseEvent): void => { // Check if the mouse click was within the element's ref. if (!ref || ref.length === 0) return const node = ref.find((x) => x?.current?.contains(event?.target as Node)) if (!node) { callback() } } window.addEventListener('mousedown', handler) return (): void => { window.removeEventListener('mousedown', handler) } }, [ref, callback]) } // Usage (it should be in the component*) const firstRef = useRef(null) const secondRef = useRef(null) const handleClick = () => { console.log('Clicked outside ref') } useOutsideClick([firstRef, secondRef], handleClick)