react-toastly/src/components/Toast.jsx

A beautiful React toast notification library with animations, gradients, sounds, and premium features for free.

import React from "react";

const Toast = ({ message, type }) => {
  const bgColor =
    type === "success"
      ? "#4caf50"
      : type === "error"
      ? "#f44336"
      : type === "warning"
      ? "#ff9800"
      : type === "info"
      ? "#2196f3"
      : "#555";

  return (
    <div
      role="alert"
      aria-live="assertive"
      style={{
        padding: "12px 20px",
        borderRadius: 8,
        color: "white",
        fontWeight: "bold",
        backgroundColor: bgColor,
        boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
        opacity: 0.9,
        animation: "slideIn 0.3s ease forwards",
      }}
    >
      {message}
    </div>
  );
};

export default Toast;