Observador de Clique (ClickAwayListener)

Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.

📦 1.5 kB gzipado.
⚛️ Suporte para portais

Exemplo

Por exemplo, se você precisar ocultar um menu quando as pessoas clicarem em qualquer outro lugar da sua página:

<ClickAwayListener onClickAway={handleClickAway}>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>

Observe que o componente aceita apenas um elemento filho. Você pode encontrar demonstrações avançadas na seção documentação de menu.

Portal

A demonstração a seguir usa Portal para renderizar o menu suspenso em uma nova "subárvore" fora da hierarquia atual do DOM.

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <div className={classes.dropdown}>
          Click me, I will stay visible until you click outside.
        </div>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

API

<ClickAwayListener />