Click Away Listener

Detecta si ocurrió un evento de clic fuera de un elemento. Escucha los clics que se producen en algún lugar del documento.

📦 1.5 kB comprimido.
⚛️ Support portals

La función de estilo de la paleta.

Ejemplo

Por ejemplo, si necesita ocultar un menú desplegable cuando las personas hacen clic en cualquier otro lugar de su página:

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

Ten en cuenta que el componente sólo acepta un elemento child. Puedes encontrar una demostración más avanzada en la sección de documentación del Menú.

Portal

La siguiente demostración utiliza Portal para renderizar el desplegable en un nuevo "subárbol" fuera de la jerarquía del DOM actual.

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

Eventos

Por defecto, el componente responde a los eventos clic y de toque final (click + touch end). Sin embargo, puedes configurarlo para que responda a los eventos de ratón presionado y toque inicial (mouse down + touch start).

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

⚠️ En este modo, sólo se ignoran las interacciones con la barra de desplazamiento del documento.

API

<ClickAwayListener />