Como detectar clique fora de componente em React

Neste artigo você aprenderá a como detectar clique fora de componente, utilizando a biblioteca de front-end React JS!

Fala programador(a), beleza? Bora aprender mais sobre React!

Desenvolver interfaces intuitivas e reativas é essencial para a criação de experiências de usuário de qualidade.

Em alguns cenários, você pode querer detectar quando um usuário clica fora de um componente específico no React, talvez para fechar um menu suspenso ou um modal.

Este artigo irá guiá-lo sobre como detectar um clique fora de um componente em React.

Compreendendo o Problema

Por que detectar um clique fora de um componente é um problema?

A razão é que o React, por padrão, não oferece uma maneira direta de escutar eventos que ocorrem fora de um componente.

Contudo, não se preocupe, porque existem maneiras eficientes de resolver isso.

A Solução com Refs e Eventos do DOM

A solução básica para detectar cliques fora de um componente no React envolve a utilização da API Refs e a escuta de eventos do DOM.

Em primeiro lugar, usamos a API Refs para obter uma referência ao nó DOM do nosso componente. Em seguida, adicionamos um event listener ao documento para escutar cliques.

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

function DropdownMenu() {
  const dropdownRef = useRef(null);
  const [isActive, setIsActive] = useState(false);

  const onClick = () => setIsActive(!isActive);

  useEffect(() => {
    const pageClickEvent = (e) => {
      if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {
        setIsActive(!isActive); 
      }
    };

    if (isActive) {
      window.addEventListener('click', pageClickEvent);
    }

    return () => {
      window.removeEventListener('click', pageClickEvent);
    }

  }, [isActive]);

  return (
    <div ref={dropdownRef}>
      <button onClick={onClick}>Mostrar Menu</button>
      {isActive && (
        <div>
          <p>Opção 1</p>
          <p>Opção 2</p>
          <p>Opção 3</p>
        </div>
      )}
    </div>
  );
}

Nesse exemplo, temos um componente DropdownMenu que é composto por um botão e um menu.

O estado isActive controla se o menu está aberto ou fechado.

Quando o botão é clicado, a função onClick é acionada e alterna o valor de isActive.

Quando isActive é verdadeiro, um event listener é adicionado ao objeto window. Esse listener irá escutar todos os cliques na página.

Se o clique ocorrer fora do menu, a função pageClickEvent é ativada e fecha o menu.

Utilizando bibliotecas de terceiros

Enquanto a abordagem mencionada acima pode resolver a maioria das situações, pode haver momentos em que usar uma biblioteca de terceiros seja mais eficiente e menos propensa a erros.

Bibliotecas como react-onclickoutside e react-click-outside são projetadas especificamente para lidar com cliques fora de um elemento e podem oferecer mais funcionalidades.

import React from 'react';
import onClickOutside from 'react-onclickoutside';

class DropdownMenu extends React.Component {
  constructor() {
    super();
    this.state = {
      isActive: false,
    };
  }

  toggleMenu = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive,
    }));
  }

  handleClickOutside = () => {
    this.setState({
      isActive: false,
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleMenu}>Mostrar Menu</button>
        {this.state.isActive && (
          <div>
            <p>Opção 1</p>
            <p>Opção 2</p>
            <p>Opção 3</p>
          </div>
        )}
      </div>
    );
  }
}

export default onClickOutside(DropdownMenu);

Neste exemplo, usamos react-onclickoutside, uma biblioteca popular que fornece um componente de ordem superior (HOC) que pode ser usado para detectar quando um clique acontece fora de um componente.

Solução usando Hooks personalizados

Outra solução seria criar um hook personalizado.

Os Hooks personalizados são uma característica do React que permite extrair a lógica do componente para funções reutilizáveis.

Você poderia criar um hook personalizado useOutsideClick para fornecer esta funcionalidade a qualquer componente.

import { useEffect } from 'react';

function useOutsideClick(ref, callback) {
  const handleClick = e => {
    if (ref.current && !ref.current.contains(e.target)) {
      callback();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  });
}

export default useOutsideClick;

Neste exemplo, o hook useOutsideClick recebe um ref e um callback. O hook adiciona um event listener ao documento que aciona o callback quando um clique ocorre fora do elemento referenciado.

Embora o React não forneça uma solução pronta para detectar cliques fora de um componente, a combinação de várias partes das suas APIs permite a implementação desta funcionalidade com relativa facilidade.

Seja você usando event listeners e refs, recorrendo a bibliotecas de terceiros, ou construindo seus próprios hooks, o React oferece a flexibilidade necessária para construir a interface de usuário que você precisa.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

É importante lembrar que a abordagem apresentada é útil para situações básicas e pode não funcionar para todos os cenários.

Por exemplo, essa solução pode não funcionar corretamente com portais do React.

Se você estiver desenvolvendo uma aplicação mais complexa, talvez queira considerar a utilização de bibliotecas especializadas para gerenciamento de cliques fora de um componente.

Com isso, finalizamos o nosso artigo sobre como detectar cliques fora de um componente em React. Espero que você tenha achado útil e que possa aplicar essas informações no seu projeto.

Lembre-se sempre de testar seu código e buscar pelas melhores práticas.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.