{"_id":"@aniruddha1806/toast","_rev":"4-f4bc05540718c109ec08e972cb6bf6a9","name":"@aniruddha1806/toast","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aniruddha1806/toast","version":"1.0.0","keywords":["react","toast","notification","alert","message","popup","react-component","ui","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/toast@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"23a382b8eafc1551dc550933426579fb4f1a9c12","tarball":"https://registry.npmjs.org/@aniruddha1806/toast/-/toast-1.0.0.tgz","fileCount":8,"integrity":"sha512-l3fH1333iOEF5LI1WhIjCThmad5RKZjNL7wf5D0TKmQjm5kpj/GBNF3e8AqjeNGASaiYwc9YAtpO+jfQM9qS1Q==","signatures":[{"sig":"MEYCIQCRfv0PtSn5QRUPE6Eud/hSuB1dDD6Ki7oM6qi3SUQ7DwIhAK2EGsDPIsgN80P2XoqKptNFOqNp8SMbzrDaoclsxuWt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71225},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","clean":"rimraf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable toast notification component for React with zero dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^3.0.2","rollup":"^2.75.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.32.0","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/toast_1.0.0_1744019257762_0.5454610140041414","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/toast","version":"1.0.1","keywords":["react","toast","notification","alert","message","popup","react-component","ui","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/toast@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"00c9cdba8728935494e8dd73be8642ac0f6b0c07","tarball":"https://registry.npmjs.org/@aniruddha1806/toast/-/toast-1.0.1.tgz","fileCount":8,"integrity":"sha512-OiP14HAAU97S9eetK9qqxeT4F4sar9qZor6bzHn1WZpu0N35WbVpZGblDnB289135fBIgjX5KddXsNUA0P9rWA==","signatures":[{"sig":"MEUCIAIKORDOTRa7quLcETjaySva6WQdnCr/ZvZcXlL3IXuJAiEAhxP4EEIpqFxHEm5lYcGmwMmZt1td2mYfui1friaBf4s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":72894},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","clean":"rimraf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable toast notification component for React with zero dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^3.0.2","rollup":"^2.75.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.32.0","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/toast_1.0.1_1744019919380_0.8040116275859657","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/toast","version":"1.0.2","keywords":["react","toast","notification","alert","message","popup","react-component","ui","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/toast@1.0.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"77e959b27cd28e32edb52d0d89678639712ff97b","tarball":"https://registry.npmjs.org/@aniruddha1806/toast/-/toast-1.0.2.tgz","fileCount":8,"integrity":"sha512-EgCDoLxRqz0tCQfa4EjVvth1kP1jkv1pzTLrJYcmgzWwvw0Y7K/MEiJlLNhkq6QIGuCYphOPtkwnITqNzczwZQ==","signatures":[{"sig":"MEUCIDYeHnwnH29sliV6BuHQZkizh025n27IWFOqtsC8Ek+0AiEA5xxAOQBvcrivPzzNn69M01pBwb+SXnCYIABIrNGlHD4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76905},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","clean":"rimraf dist","typecheck":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A lightweight, customizable toast notification component for React with zero dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"^3.0.2","rollup":"^2.75.0","typescript":"^4.7.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^22.0.0","rollup-plugin-typescript2":"^0.32.0","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/toast_1.0.2_1744021141943_0.5790840048414665","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aniruddha1806/toast","version":"1.0.3","description":"A lightweight, customizable toast notification component for React with zero dependencies","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build","typecheck":"tsc --noEmit"},"keywords":["react","toast","notification","alert","message","popup","react-component","ui","typescript"],"author":{"name":"Your Name"},"license":"MIT","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-terser":"^0.4.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rimraf":"^3.0.2","rollup":"^2.75.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.32.0","typescript":"^4.7.2"},"dependencies":{"tslib":"^2.8.1"},"_id":"@aniruddha1806/toast@1.0.3","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-hMkqRkkGdLi7COLq6JYZitFuYcNiNU+W0+4fF/6B8gfDqLm5tqVK9zLZphaYK1XzeuDVGZ/PJCs7N68J6f2OVw==","shasum":"caf83f1855ab23272c6b536bd883bac7d5425066","tarball":"https://registry.npmjs.org/@aniruddha1806/toast/-/toast-1.0.3.tgz","fileCount":9,"unpackedSize":87561,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCNCzAF6b82NbqdZG+THEJ2Ghx+yf2ZZQvVoCeUoJZDrwIhAJ7yYwadnuywjvCjj99t8V9dhz3tml+gn2SRI41GNBeV"}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/toast_1.0.3_1749136810831_0.8423907204572119"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-07T09:47:37.661Z","modified":"2025-06-05T15:20:11.196Z","1.0.0":"2025-04-07T09:47:37.946Z","1.0.1":"2025-04-07T09:58:39.535Z","1.0.2":"2025-04-07T10:19:02.142Z","1.0.3":"2025-06-05T15:20:11.006Z"},"author":{"name":"Your Name"},"license":"MIT","keywords":["react","toast","notification","alert","message","popup","react-component","ui","typescript"],"description":"A lightweight, customizable toast notification component for React with zero dependencies","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Toast Component\r\n\r\nA powerful, customizable toast notification system for React applications with TypeScript support. Features multiple toast types, positioning options, progress bars, and advanced timer management.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/toast\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 🎯 Multiple toast types (success, error, info, warning, default)\r\n- πŸ“ 6 positioning options (top/bottom + left/center/right)\r\n- ⏱️ Auto-dismiss with customizable duration\r\n- πŸ“Š Progress bar with real-time countdown\r\n- ⏸️ Pause on hover functionality\r\n- 🎨 Customizable styling and animations\r\n- πŸ”§ TypeScript support with full type definitions\r\n- β™Ώ Accessibility features with ARIA support\r\n- πŸͺ Easy-to-use React hooks\r\n- 🎭 Built-in icons for all toast types\r\n- πŸ”„ Advanced timer management with pause/resume\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { ToastProvider, useToast } from '@aniruddha1806/toast';\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction MyComponent() {\r\n const { successToast, errorToast, infoToast, warningToast } = useToast();\r\n\r\n const handleSuccess = () => {\r\n successToast('Operation completed successfully!');\r\n };\r\n\r\n const handleError = () => {\r\n errorToast('Something went wrong!');\r\n };\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n## Components\r\n\r\n### ToastProvider\r\n\r\nWrap your application with ToastProvider to enable toast functionality:\r\n\r\n```jsx\r\nimport { ToastProvider } from '@aniruddha1806/toast';\r\n\r\nfunction App() {\r\n return (\r\n \r\n {/* Your app content */}\r\n \r\n );\r\n}\r\n```\r\n\r\n### useToast Hook\r\n\r\nAccess toast functionality from any component:\r\n\r\n```jsx\r\nimport { useToast } from '@aniruddha1806/toast';\r\n\r\nfunction MyComponent() {\r\n const { \r\n addToast, \r\n removeToast, \r\n successToast, \r\n errorToast, \r\n infoToast, \r\n warningToast \r\n } = useToast();\r\n\r\n // Use the convenience methods or addToast for full control\r\n}\r\n```\r\n\r\n## Props & Types\r\n\r\n### ToastProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `id` | `string` | `auto-generated` | Unique identifier for the toast |\r\n| `message` | `string` | `undefined` | Main toast message |\r\n| `title` | `string` | `undefined` | Toast title (optional) |\r\n| `description` | `string` | `undefined` | Additional description text |\r\n| `status` | `ToastStatus` | `\"default\"` | Toast type/status |\r\n| `duration` | `number` | `5000` | Auto-dismiss duration in ms (0 = no auto-dismiss) |\r\n| `position` | `ToastPosition` | `\"bottom-right\"` | Toast position on screen |\r\n| `pauseOnHover` | `boolean` | `false` | Pause timer when hovering |\r\n| `role` | `ToastRole` | `\"status\"` | ARIA role for accessibility |\r\n| `onClose` | `() => void` | `undefined` | Callback when toast is closed |\r\n| `className` | `string` | `undefined` | Custom CSS class |\r\n| `showProgressBar` | `boolean` | `true` | Show progress bar countdown |\r\n\r\n### Types\r\n\r\n```typescript\r\ntype ToastStatus = \"success\" | \"error\" | \"info\" | \"warning\" | \"default\";\r\ntype ToastPosition = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\";\r\ntype ToastRole = \"alert\" | \"status\" | \"log\";\r\n```\r\n\r\n## Examples\r\n\r\n### Basic Usage\r\n\r\nSimple toast notifications:\r\n\r\n```jsx\r\nimport { ToastProvider, useToast } from '@aniruddha1806/toast';\r\n\r\nfunction BasicExample() {\r\n const { successToast, errorToast, infoToast, warningToast } = useToast();\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nfunction App() {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n### Advanced Toast Options\r\n\r\nUse the full toast configuration:\r\n\r\n```jsx\r\nimport { useToast } from '@aniruddha1806/toast';\r\n\r\nfunction AdvancedExample() {\r\n const { addToast } = useToast();\r\n\r\n const showAdvancedToast = () => {\r\n addToast({\r\n title: 'Upload Complete',\r\n message: 'Your file has been uploaded successfully.',\r\n description: 'You can now share the link with others.',\r\n status: 'success',\r\n duration: 8000,\r\n position: 'top-right',\r\n pauseOnHover: true,\r\n showProgressBar: true,\r\n onClose: () => console.log('Toast closed')\r\n });\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### Different Positions\r\n\r\nShow toasts in different positions:\r\n\r\n```jsx\r\nimport { useToast } from '@aniruddha1806/toast';\r\n\r\nfunction PositionExample() {\r\n const { addToast } = useToast();\r\n\r\n const positions = [\r\n 'top-left', 'top-center', 'top-right',\r\n 'bottom-left', 'bottom-center', 'bottom-right'\r\n ];\r\n\r\n return (\r\n
\r\n {positions.map(position => (\r\n addToast({\r\n message: `Toast from \\${position}`,\r\n position: position,\r\n status: 'info'\r\n })}\r\n >\r\n {position}\r\n \r\n ))}\r\n
\r\n );\r\n}\r\n```\r\n\r\n### Form Validation Example\r\n\r\nReal-world form validation with toasts:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { useToast } from '@aniruddha1806/toast';\r\n\r\nfunction FormExample() {\r\n const [email, setEmail] = useState('');\r\n const [password, setPassword] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n const { successToast, errorToast, warningToast } = useToast();\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n \r\n // Validation\r\n if (!email || !password) {\r\n warningToast('Please fill in all fields');\r\n return;\r\n }\r\n\r\n if (!email.includes('@')) {\r\n errorToast('Please enter a valid email address');\r\n return;\r\n }\r\n\r\n if (password.length < 6) {\r\n errorToast('Password must be at least 6 characters');\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n\r\n try {\r\n // Simulate API call\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n \r\n successToast({\r\n title: 'Login Successful',\r\n message: 'Welcome back!',\r\n description: 'You have been logged in successfully.',\r\n duration: 6000\r\n });\r\n \r\n // Reset form\r\n setEmail('');\r\n setPassword('');\r\n } catch (error) {\r\n errorToast({\r\n title: 'Login Failed',\r\n message: 'Invalid credentials',\r\n description: 'Please check your email and password.',\r\n duration: 8000\r\n });\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n return (\r\n
\r\n
\r\n \r\n setEmail(e.target.value)}\r\n style={{ \r\n width: '100%', \r\n padding: '8px', \r\n marginTop: '4px',\r\n border: '1px solid #ccc',\r\n borderRadius: '4px'\r\n }}\r\n />\r\n
\r\n \r\n
\r\n \r\n setPassword(e.target.value)}\r\n style={{ \r\n width: '100%', \r\n padding: '8px', \r\n marginTop: '4px',\r\n border: '1px solid #ccc',\r\n borderRadius: '4px'\r\n }}\r\n />\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n### Persistent Toasts\r\n\r\nCreate toasts that don't auto-dismiss:\r\n\r\n```jsx\r\nimport { useToast } from '@aniruddha1806/toast';\r\n\r\nfunction PersistentExample() {\r\n const { addToast, removeToast } = useToast();\r\n\r\n const showPersistentToast = () => {\r\n const toastId = addToast({\r\n title: 'Important Notice',\r\n message: 'This toast will not auto-dismiss',\r\n description: 'You must manually close it',\r\n status: 'warning',\r\n duration: 0, // 0 means no auto-dismiss\r\n showProgressBar: false,\r\n position: 'top-center'\r\n });\r\n\r\n // Optionally, you can programmatically remove it later\r\n setTimeout(() => {\r\n removeToast(toastId);\r\n }, 10000); // Remove after 10 seconds\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { useToast, ToastProps, ToastStatus, ToastPosition } from '@aniruddha1806/toast';\r\n\r\ninterface NotificationService {\r\n showSuccess: (message: string) => void;\r\n showError: (message: string) => void;\r\n showCustom: (config: Partial) => void;\r\n}\r\n\r\nconst useNotificationService = (): NotificationService => {\r\n const { successToast, errorToast, addToast } = useToast();\r\n\r\n const showSuccess = (message: string): void => {\r\n successToast(message, {\r\n duration: 4000,\r\n position: 'top-right' as ToastPosition\r\n });\r\n };\r\n\r\n const showError = (message: string): void => {\r\n errorToast(message, {\r\n duration: 6000,\r\n position: 'top-center' as ToastPosition\r\n });\r\n };\r\n\r\n const showCustom = (config: Partial): void => {\r\n addToast({\r\n status: 'info' as ToastStatus,\r\n duration: 5000,\r\n ...config\r\n });\r\n };\r\n\r\n return { showSuccess, showError, showCustom };\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}