react-toastly-jsx/src/index.jsx

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

import React, { createContext, useContext, useState } from "react";

const ToastContext = createContext();

export const ToastlyProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);

  const success = (message) => {
    const id = Date.now();
    setToasts((prev) => [...prev, { id, message }]);
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 3000);
  };

  return (
    <ToastContext.Provider value={{ success }}>
      {children}
      <div className="fixed top-4 right-4 space-y-2 z-50">
        {toasts.map(({ id, message }) => (
          <div
            key={id}
            className="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-3 rounded-lg shadow-lg animate-slideIn"
            style={{ minWidth: "250px" }}
          >
            {message}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
};

export const useToastly = () => useContext(ToastContext);