Alerta Cerrable

Introducción

En este laboratorio, crearemos un componente de alerta cerrable (Closable Alert) utilizando React. El componente permitirá a los usuarios mostrar un mensaje de un tipo específico y cerrar la alerta una vez que hayan terminado con ella. Al final de este laboratorio, habrás aprendido cómo utilizar los hooks useState() y useEffect() para crear un componente dinámico que se puede personalizar fácilmente para adaptarse a tus necesidades.

index.html y script.js ya se han proporcionado en la máquina virtual (VM). En general, solo necesitas agregar código a script.js y style.css.

Renderiza un componente de alerta con la propiedad type.

El componente Alert recibe las siguientes propiedades:

isDefaultShown: un valor booleano que determina si la alerta se muestra inicialmente o no (el valor predeterminado es false).
timeout: un número que especifica la duración en milisegundos antes de que la alerta se desvanezca (el valor predeterminado es 250).
type: una cadena que determina el tipo de alerta (por ejemplo, "warning", "error", "info").
message: una cadena que contiene el mensaje a mostrar en la alerta.

El componente realiza lo siguiente:

Utiliza el hook useState() para crear las variables de estado isShown e isLeaving y las establece en false inicialmente.
Define una variable timeoutId para mantener la instancia del temporizador y limpiarla cuando el componente se desmonte.
Utiliza el hook useEffect() para actualizar el valor de isShown a true y limpiar el intervalo utilizando timeoutId cuando el componente se desmonte.
Define una función closeAlert para establecer que el componente se quite del DOM mostrando una animación de desvanecimiento y estableciendo isShown en false a través de setTimeout().
Renderiza el componente de alerta si isShown es true. El componente tiene los estilos adecuados según la propiedad type y se desvanece si isLeaving es true.

Aquí está el código:

@keyframes leave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.alert {
  padding: 0.75rem 0.5rem;
  margin-bottom: 0.5rem;
  text-align: left;
  padding-right: 40px;
  border-radius: 4px;
  font-size: 16px;
  position: relative;
}

.alert.warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert.error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert.leaving {
  animation: leave 0.5s forwards;
}

.alert.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.75rem;
  color: #333;
  border: 0;
  height: 100%;
  cursor: pointer;
  background: none;
  font-weight: 600;
  font-size: 16px;
}

.alert.close::after {
  content: "x";
}

const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
  const [isShown, setIsShown] = React.useState(isDefaultShown);
  const [isLeaving, setIsLeaving] = React.useState(false);

  let timeoutId = null;

  React.useEffect(() => {
    setIsShown(true);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [isDefaultShown, timeout, timeoutId]);

  const closeAlert = () => {
    setIsLeaving(true);
    timeoutId = setTimeout(() => {
      setIsLeaving(false);
      setIsShown(false);
    }, timeout);
  };

  return (
    isShown && (
      <div
        className={`alert ${type} ${isLeaving ? "leaving" : ""}`}
        role="alert"
      >
        <button className="close" onClick={closeAlert} />
        {message}
      </div>
    )
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Alert type="info" message="This is info" />
);

Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para ver una vista previa de la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Alerta Cerrable (Closable Alert). Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Crear una alerta React cerrable

Introducción

Alerta Cerrable

Resumen