Breaking News: Grepper is joining You.com. Read the official announcement!

useOnClickOutside react hook

Mehedi Islam Ripon answered on January 12, 2021 Popularity 8/10 Helpfulness 3/10

answer useOnClickOutside react hook

related handleClickoutside custom hook react

useOnClickOutside react hook

Comment

import { RefObject } from 'react'

import { useEventListener } from 'usehooks-ts'

type Handler = (event: MouseEvent) => void

function useOnClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  handler: Handler,
  mouseEvent: 'mousedown' | 'mouseup' = 'mousedown',
): void {
  useEventListener(mouseEvent, event => {
    const el = ref?.current

    // Do nothing if clicking ref's element or descendent elements
    if (!el || el.contains(event.target as Node)) {
      return
    }

    handler(event)
  })
}

export default useOnClickOutside

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

Closely Related Answers

handleClickoutside custom hook react

Comment

import { useState, useEffect, useRef } from 'react';

export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef<HTMLDivElement>(null);

    const handleHideDropdown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
            setIsComponentVisible(false);
        }
    };

    const handleClickOutside = (event: Event) => {
        if (ref.current && !ref.current.contains(event.target as Node)) {
            setIsComponentVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('keydown', handleHideDropdown, true);
        document.addEventListener('click', handleClickOutside, true);
        return () => {
            document.removeEventListener('keydown', handleHideDropdown, true);
            document.removeEventListener('click', handleClickOutside, true);
        };
    });

    return { ref, isComponentVisible, setIsComponentVisible };
}

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Jan 12 2021

Outrageous Opossum

0 Answers Avg Quality 2/10

useOnClickOutside react hook

Contents

More Related Answers

useOnClickOutside react hook

Closely Related Answers

handleClickoutside custom hook react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.