Toast

Notificación de posición fija insertada en document.body mediante un portal de React. Se desliza hacia arriba desde la parte inferior de la pantalla al abrirse. Se cierra automáticamente tras la duration configurada llamando a onClose. Soporta título opcional y botón de cierre manual.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el toast está visible. | | message | string | Sí | — | Texto del mensaje principal. | | title | string | No | — | Encabezado en negrita opcional sobre el mensaje. | | color | string | No | primary del tema | Color de fondo del toast. | | duration | number | No | 3000 | Milisegundos antes de que onClose se llame automáticamente. 0 para deshabilitar el cierre automático. | | onClose | () => void | No | — | Callback de cierre (cierre automático y manual). | | zIndex | number | No | 999999 | Z-index del toast. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor. | | titleStyle | React.CSSProperties | No | — | Estilos del título. | | messageStyle | React.CSSProperties | No | — | Estilos del mensaje. |

Uso

Básico

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Mostrar Toast</button>
      <Toast
        isOpen={open}
        message="Producto guardado exitosamente."
        onClose={() => setOpen(false)}
      />
    </>
  );
}

Con título y color personalizado

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Mostrar Error</button>
      <Toast
        isOpen={open}
        title="Error"
        message="Algo salió mal. Por favor intenta nuevamente."
        color="#e74c3c"
        duration={5000}
        onClose={() => setOpen(false)}
      />
    </>
  );
}

Toast persistente (sin cierre automático)

import { useState } from 'react';
import Toast from '@/components/Toast';

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <Toast
      isOpen={open}
      message="Tienes cambios sin guardar."
      duration={0}
      onClose={() => setOpen(false)}
    />
  );
}