toastvibe/dist/index.mjs.map

ToastVibe is a lightweight, customizable, and flexible toast notification library for React.

{"version":3,"sources":["../src/context/ToastContext.tsx","../src/components/Toast.tsx","../src/toast.ts","../src/components/ToasterContainer.tsx","../src/hooks/useToast.ts"],"sourcesContent":["// src/context/ToastContext.tsx\r\nimport React, { createContext, useState, useEffect } from 'react';\r\nimport { ToastProps, ToastPosition } from '../types/types';\r\nimport Toast from '../components/Toast';\r\nimport { setToastContext } from '../toast';\r\n\r\nexport interface ToastContextType {\r\n  toasts: ToastProps[];\r\n  addToast: (toast: ToastProps) => void;\r\n  removeToast: (index: number) => void;\r\n  updateToastStatus: (index: number, status: 'pending' | 'completed') => void;\r\n  position?: ToastPosition;\r\n  richColors?: boolean;\r\n  closeButton?: boolean;\r\n  className?: string;\r\n  duration?:number\r\n}\r\n\r\nexport const ToastContext = createContext<ToastContextType | null>(null);\r\n\r\nexport const ToastProvider: React.FC<{\r\n  children: React.ReactNode;\r\n  position?: ToastPosition;\r\n  richColors?: boolean;\r\n  closeButton?: boolean;\r\n  className?: string;\r\n  duration?: number;\r\n}> = ({\r\n  children,\r\n  position = 'top-right',\r\n  richColors = false,\r\n  closeButton = true,\r\n  className,\r\n  duration= 3000\r\n}) => {\r\n  const [toasts, setToasts] = useState<ToastProps[]>([]);\r\n\r\n  const addToast = (toast: ToastProps) => {\r\n    setToasts((prevToasts) => [\r\n      ...prevToasts,\r\n      { ...toast, position: toast.position || position },\r\n    ]);\r\n    const toastDuration = toast.duration || duration;\r\n    setTimeout(() => removeToast(toasts.length), toastDuration);\r\n  };\r\n\r\n  const removeToast = (index: number) => {\r\n    setToasts(toasts.filter((_, i) => i !== index));\r\n  };\r\n  const updateToastStatus = (\r\n    index: number,\r\n    status: 'pending' | 'completed'\r\n  ) => {\r\n    setToasts((prevToasts) =>\r\n      prevToasts.map((toast, i) => (i === index ? { ...toast, status } : toast))\r\n    );\r\n  };\r\n\r\n  // Initialize the global toast context\r\n  useEffect(() => {\r\n    setToastContext({ addToast });\r\n    return () => setToastContext(null); // Cleanup on unmount\r\n  }, []);\r\n\r\n  return (\r\n    <ToastContext.Provider\r\n      value={{\r\n        toasts,\r\n        addToast,\r\n        removeToast,\r\n        updateToastStatus,\r\n        position,\r\n        richColors,\r\n        closeButton,\r\n        className,\r\n        duration \r\n      }}\r\n    >\r\n      {children}\r\n      <div className={`toast-container ${position} ${className || ''}`}>\r\n        {toasts.map((toast, index) => (\r\n          <Toast\r\n            key={index}\r\n            message={toast.message}\r\n            type={toast.type}\r\n            onClose={() => removeToast(index)}\r\n            richColors={richColors}\r\n            closeButton={closeButton}\r\n            status={toast.status}\r\n          />\r\n        ))}\r\n      </div>\r\n    </ToastContext.Provider>\r\n  );\r\n};\r\n","// src/components/Toast.tsx\r\nimport React, { useEffect, useState } from 'react';\r\nimport { ToastProps } from '../types/types';\r\nimport '../styles/styles.css';\r\n\r\nconst Toast: React.FC<ToastProps> = ({ message, type = 'info', onClose, richColors, closeButton, status = 'pending' }) => {\r\n  const [toastStatus, setToastStatus] = useState(status);\r\n\r\n  useEffect(() => {\r\n    setToastStatus(status);\r\n  }, [status]);\r\n\r\n  return (\r\n    <div className={`toast toast-${type} ${richColors ? 'rich-colors' : ''}`}>\r\n      <span className=\"toast-message\">{message}</span>\r\n      {type === 'pending' && toastStatus === 'pending' && (\r\n        <div className=\"toast-loading\">\r\n          <div className=\"toast-loading-spinner\"></div>\r\n        </div>\r\n      )}\r\n      {toastStatus === 'completed' && type === 'success' && (\r\n        <span className=\"toast-icon\">✅</span>\r\n      )}\r\n      {toastStatus === 'completed' && type === 'error' && (\r\n        <span className=\"toast-icon\">❌</span>\r\n      )}\r\n      {closeButton && (\r\n        <button className=\"toast-close\" onClick={onClose}>\r\n          &times;\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Toast;","// src/toast.ts\r\nimport { ToastProps } from './types/types';\r\n\r\nlet toastContext: {\r\n  addToast: (toast: ToastProps) => void;\r\n  updateToastStatus: (index: number, status: 'pending' | 'completed') => void;\r\n} | null = null;\r\n\r\nexport const setToastContext = (context: any) => {\r\n  toastContext = context;\r\n};\r\n\r\nexport const toast = {\r\n  info: (message: string, options?: Partial<ToastProps>) => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    toastContext.addToast({ message, type: 'info', ...options });\r\n  },\r\n  success: (message: string, options?: Partial<ToastProps>) => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    toastContext.addToast({ message, type: 'success', ...options });\r\n  },\r\n  warning: (message: string, options?: Partial<ToastProps>) => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    toastContext.addToast({ message, type: 'warning', ...options });\r\n  },\r\n  error: (message: string, options?: Partial<ToastProps>) => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    toastContext.addToast({ message, type: 'error', ...options });\r\n  },\r\n  pending: (message: string, options?: Partial<ToastProps>) => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    const index = toastContext.addToast({ message, type: 'pending', status: 'pending', ...options });\r\n    return index; // Return the toast index for dynamic updates\r\n  },\r\n  updateStatus: (index: number, status: 'pending' | 'completed') => {\r\n    if (!toastContext) throw new Error('ToastProvider not initialized');\r\n    toastContext.updateToastStatus(index, status);\r\n  },\r\n};","// src/components/ToasterContainer.tsx\r\nimport React from 'react';\r\nimport { ToastProvider } from '../context/ToastContext';\r\n\r\nexport const ToasterContainer: React.FC<{\r\n  position?:\r\n    | 'top-left'\r\n    | 'top-right'\r\n    | 'bottom-left'\r\n    | 'bottom-right'\r\n    | 'top-center'\r\n    | 'bottom-center';\r\n  richColors?: boolean;\r\n  closeButton?: boolean;\r\n  className?: string;\r\n  duration?: number;\r\n  children: React.ReactNode;\r\n}> = ({\r\n  position = 'top-right',\r\n  richColors = false,\r\n  closeButton = true,\r\n  className,\r\n  duration,\r\n  children,\r\n}) => {\r\n  return (\r\n    <ToastProvider\r\n      position={position}\r\n      richColors={richColors}\r\n      closeButton={closeButton}\r\n      className={className}\r\n      duration={duration}\r\n    >\r\n      {children}\r\n    </ToastProvider>\r\n  );\r\n};\r\n","import React from 'react';\r\nimport { ToastContext, ToastContextType } from '../context/ToastContext';\r\n\r\nexport const useToast = (): ToastContextType => {\r\n  const context = React.useContext(ToastContext);\r\n  if (!context) {\r\n    throw new Error('❌ useToast must be used within a <ToastProvider>.');\r\n  }\r\n  return context;\r\n};\r\n"],"mappings":"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","names":["createContext","useState","useEffect","useEffect","useState","jsx","jsxs","Toast","message","type","onClose","richColors","closeButton","status","toastStatus","setToastStatus","useState","useEffect","Toast_default","toastContext","setToastContext","context","toast","message","options","__spreadValues","index","status","jsx","jsxs","ToastContext","createContext","ToastProvider","children","position","richColors","closeButton","className","duration","toasts","setToasts","useState","addToast","toast","prevToasts","__spreadProps","__spreadValues","toastDuration","removeToast","index","_","i","updateToastStatus","status","useEffect","setToastContext","Toast_default","jsx","ToasterContainer","position","richColors","closeButton","className","duration","children","ToastProvider","React","useToast","context","React","ToastContext"]}