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 gzipped.
⚛️ 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>

Eventos

Por padrão, o componente responde aos eventos de clique e de toque final (click + touch end). No entanto, você pode configurá-lo para responder aos eventos de mouse pressionado e toque inicial (mouse down + touch start).

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  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>

⚠️ Neste modo, apenas as interações na barra de rolagem do documento são ignoradas.

API

<ClickAwayListener />