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

handleClickoutside custom hook react

Outrageous Opossum answered on January 12, 2021 Popularity 8/10 Helpfulness 4/10

answer handleClickoutside custom hook react

related useOnClickOutside react hook

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

Closely Related Answers

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: javascript hook

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

handleClickoutside custom hook react

Contents

More Related Answers

handleClickoutside custom hook react

Closely Related Answers

useOnClickOutside react hook

Grepper

Documentation

Social

Legal

Contact

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