{"_id":"@alfonsodev1/js-toast","name":"@alfonsodev1/js-toast","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@alfonsodev1/js-toast","version":"2.0.0","description":"A lightweight, framework-agnostic toast notification library with zero dependencies","type":"module","main":"./dist/index.js","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js"}},"keywords":["toast","notification","vanilla-js","framework-agnostic","lightweight","svg-icons","accessible"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/AlfonsoPrograms/js-toast.git"},"scripts":{"build":"cp src/index.js dist/index.js","dev":"node -e \"console.log('Development mode - serve dist/ directory')\""},"publishConfig":{"access":"public"},"engines":{"node":">=12.0.0"},"gitHead":"dab27ab821ad937218d165a24b8497285d05a71a","types":"./dist/index.d.ts","_id":"@alfonsodev1/js-toast@2.0.0","bugs":{"url":"https://github.com/AlfonsoPrograms/js-toast/issues"},"homepage":"https://github.com/AlfonsoPrograms/js-toast#readme","_nodeVersion":"24.12.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-pGR7diq2PyR40igVMhDscuCRFOVm6EInyDBWEfAAiYUka4UhCCMswxtCu+VEVisdP2AaWmLOX6oBGWmqDDHrMg==","shasum":"e12377cffcc8a37f4a7f3c794316c5f4f26d2cdc","tarball":"https://registry.npmjs.org/@alfonsodev1/js-toast/-/js-toast-2.0.0.tgz","fileCount":5,"unpackedSize":37106,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICsStIiuzH0HoeucoAqNbJSiDetoerTKE2nUmTcHpuRZAiBN4bmgaV/DEWZ6wVTq01CNFc2xlCGNdpX7/dR0czPSSw=="}]},"_npmUser":{"name":"alfonsodev1","email":"alfonsoovilchez52@gmail.com"},"directories":{},"maintainers":[{"name":"alfonsodev1","email":"alfonsoovilchez52@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/js-toast_2.0.0_1773701159667_0.2909639006018787"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-16T22:45:59.463Z","2.0.0":"2026-03-16T22:45:59.808Z","modified":"2026-03-16T22:45:59.980Z"},"maintainers":[{"name":"alfonsodev1","email":"alfonsoovilchez52@gmail.com"}],"description":"A lightweight, framework-agnostic toast notification library with zero dependencies","homepage":"https://github.com/AlfonsoPrograms/js-toast#readme","keywords":["toast","notification","vanilla-js","framework-agnostic","lightweight","svg-icons","accessible"],"repository":{"type":"git","url":"git+https://github.com/AlfonsoPrograms/js-toast.git"},"bugs":{"url":"https://github.com/AlfonsoPrograms/js-toast/issues"},"license":"MIT","readme":"# JS Toast 🍞\r\n\r\nA lightweight, framework-agnostic toast notification library with **zero dependencies**. Works with vanilla HTML, React, Vue, Angular, or any JavaScript environment.\r\n\r\n## Features\r\n\r\n✨ **Zero Dependencies** - Uses only standard Web APIs  \r\n🎨 **Auto-Injected CSS** - No separate CSS file needed  \r\n📱 **Responsive Design** - Works on mobile and desktop  \r\n🎯 **Smart Queuing** - Multiple toasts stack vertically  \r\n⚡ **Smooth Animations** - CSS transitions with fade-in and slide-in  \r\n🎭 **Professional Icons** - SVG icons, fully customizable  \r\n♿ **Accessible** - ARIA live regions for screen readers  \r\n🌙 **Dark Mode Support** - Automatically adapts to system preferences  \r\n📦 **ES Modules** - Modern JavaScript with import/export  \r\n🎪 **6 Unique Styles** - Standard, Neon, Glassmorphism, Minimal, Bold, Outlined, Soft  \r\n🎨 **Custom Icons** - Choose your own icons (optional parameter)  \r\n📋 **Titles & Content** - Support for titles and rich messages  \r\n\r\n## Installation\r\n\r\n### npm\r\n\r\n```bash\r\nnpm install js-toast\r\n```\r\n\r\n### yarn\r\n\r\n```bash\r\nyarn add js-toast\r\n```\r\n\r\n### pnpm\r\n\r\n```bash\r\npnpm add js-toast\r\n```\r\n\r\n### CDN (UMD)\r\n\r\n```html\r\n<script src=\"https://cdn.jsdelivr.net/npm/js-toast@latest/dist/index.js\"></script>\r\n<script>\r\n  // Access via window.toast (for UMD version)\r\n  toast.show(\"Hello World!\");\r\n</script>\r\n```\r\n\r\n## Quick Start\r\n\r\n### Vanilla HTML/JavaScript\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>JS Toast Example</title>\r\n</head>\r\n<body>\r\n  <button onclick=\"handleClick()\">Show Toast</button>\r\n\r\n  <script type=\"module\">\r\n    import toast from 'js-toast';\r\n\r\n    window.handleClick = () => {\r\n      toast.show(\"Welcome! 👋\", { type: \"success\" });\r\n    };\r\n  </script>\r\n</body>\r\n</html>\r\n```\r\n\r\n### React Example\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport toast from 'js-toast';\r\n\r\nfunction App() {\r\n  const showSuccess = () => {\r\n    toast.show(\"Operation successful!\", { \r\n      type: \"success\",\r\n      duration: 3000,\r\n      position: \"top-right\"\r\n    });\r\n  };\r\n\r\n  const showError = () => {\r\n    toast.show(\"Something went wrong!\", { \r\n      type: \"error\",\r\n      position: \"top-center\"\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <button onClick={showSuccess}>Show Success</button>\r\n      <button onClick={showError}>Show Error</button>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n### Vue 3 Example\r\n\r\n```vue\r\n<template>\r\n  <div>\r\n    <button @click=\"showInfo\">Show Info</button>\r\n    <button @click=\"showWarning\">Show Warning</button>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport toast from 'js-toast';\r\n\r\nconst showInfo = () => {\r\n  toast.show(\"This is an info message\", { \r\n    type: \"info\",\r\n    position: \"bottom-right\"\r\n  });\r\n};\r\n\r\nconst showWarning = () => {\r\n  toast.show(\"Please be careful!\", { \r\n    type: \"warning\"\r\n  });\r\n};\r\n</script>\r\n```\r\n\r\n## API Reference\r\n\r\n### `toast.show(message, options)`\r\n\r\nDisplay a toast notification.\r\n\r\n#### Parameters\r\n\r\n| Parameter | Type | Default | Description |\r\n|-----------|------|---------|-------------|\r\n| `message` | `string` | - | The notification message (required) |\r\n| `options` | `object` | `{}` | Optional configuration object |\r\n\r\n#### Options\r\n\r\n| Option | Type | Default | Values |\r\n|--------|------|---------|--------|\r\n| `type` | `string` | `\"info\"` | `\"success\"`, `\"error\"`, `\"info\"`, `\"warning\"` |\r\n| `duration` | `number` | `3000` | Milliseconds (0 = no auto-dismiss) |\r\n| `position` | `string` | `\"top-right\"` | `\"top-left\"`, `\"top-center\"`, `\"top-right\"`, `\"bottom-left\"`, `\"bottom-center\"`, `\"bottom-right\"` |\r\n| `style` | `string` | `\"standard\"` | `\"standard\"`, `\"neon\"`, `\"glass\"`, `\"minimal\"`, `\"bold\"`, `\"outlined\"`, `\"soft\"` |\r\n| `icon` | `string` | (auto) | Custom SVG icon (optional, type-based if omitted) |\r\n| `title` | `string` | - | Optional title above the message |\r\n\r\n#### Returns\r\n\r\nAn object with a `close()` method to manually dismiss the toast:\r\n\r\n```javascript\r\nconst notification = toast.show(\"Message\");\r\nnotification.close(); // Dismiss immediately\r\n```\r\n\r\n### Examples\r\n\r\n```javascript\r\nimport toast from 'js-toast';\r\n\r\n// Simple message\r\ntoast.show(\"Hello!\");\r\n\r\n// Success with neon style\r\ntoast.show(\"Profile updated!\", { \r\n  type: \"success\",\r\n  style: \"neon\"\r\n});\r\n\r\n// Error with title\r\ntoast.show(\"Please try again\", { \r\n  type: \"error\",\r\n  style: \"bold\",\r\n  title: \"Upload Failed\"\r\n});\r\n\r\n// Custom icon (SVG string)\r\nconst customIcon = '<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/></svg>';\r\ntoast.show(\"Custom icon!\", { \r\n  type: \"info\",\r\n  icon: customIcon\r\n});\r\n\r\n// Glassmorphism style\r\ntoast.show(\"Modern design\", { \r\n  type: \"success\",\r\n  style: \"glass\",\r\n  position: \"bottom-center\"\r\n});\r\n\r\n// No auto-dismiss\r\nconst t = toast.show(\"Accept terms?\", { \r\n  type: \"warning\",\r\n  duration: 0 \r\n});\r\n\r\n// Manual dismissal\r\nconst toast1 = toast.show(\"Loading...\");\r\nsetTimeout(() => toast1.close(), 2000);\r\n```\r\n\r\n### `toast.clear()`\r\n\r\nRemove all active toast notifications.\r\n\r\n```javascript\r\ntoast.clear();\r\n```\r\n\r\n### `toast.clearByType(type)`\r\n\r\nRemove all toasts of a specific type.\r\n\r\n```javascript\r\ntoast.clearByType(\"error\");\r\ntoast.clearByType(\"success\");\r\n```\r\n\r\n## Built-in Icons Library\r\n\r\nThe library includes a versatile SVG icons library for both default types and custom use:\r\n\r\n| Icon | SVG ID | Description |\r\n|------|--------|-------------|\r\n| Checkmark | `success` | Success/completed action |\r\n| X | `error` | Error/failed action |\r\n| Info | `info` | Information/notice |\r\n| Warning | `warning` | Warning/caution |\r\n| Check Circle | `checkCircle` | Confirmed/verified |\r\n| Alert Circle | `alertCircle` | Alert/attention needed |\r\n| Heart | `heart` | Love/favorite |\r\n| Star | `star` | Rating/important |\r\n| Thumbs Up | `thumbsUp` | Approval/positive |\r\n| Zap | `zap` | Energy/quick action |\r\n\r\n### Using Built-in Icons\r\n\r\nAccess the `ICONS` object for custom implementations:\r\n\r\n```javascript\r\n// Import the icons if you need them\r\nimport toast, { Toast } from 'js-toast';\r\n\r\n// Use a built-in icon with a custom type\r\ntoast.show(\"Great job!\", { \r\n  type: \"success\",\r\n  icon: '<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 10.26 24 10.26 17.55 16.52 20.09 24.78 12 18.5 3.91 24.78 6.45 16.52 0 10.26 8.91 10.26 12 2\"></polygon></svg>'\r\n});\r\n```\r\n\r\n## Toast Types & Styling\r\n\r\nThe library includes 4 default toast types with 7 unique visual styles. Use the `style` parameter to change appearance, and customize icons with the `icon` parameter.\r\n\r\n### 4 Toast Types\r\n- **Success** - Green with checkmark\r\n- **Error** - Red with X icon\r\n- **Info** - Blue with info icon\r\n- **Warning** - Amber with warning icon\r\n\r\n### 7 Toast Styles\r\n\r\n#### Standard (Default)\r\n```javascript\r\ntoast.show(\"Success!\", { type: \"success\", style: \"standard\" });\r\n```\r\nGradient backgrounds with left border accent.\r\n\r\n#### Neon\r\n```javascript\r\ntoast.show(\"Glowing effect!\", { type: \"success\", style: \"neon\" });\r\n```\r\nModern neon borders with glow effect and glassmorphism backdrop.\r\n\r\n#### Glassmorphism\r\n```javascript\r\ntoast.show(\"Frosted glass\", { type: \"success\", style: \"glass\" });\r\n```\r\nFrosted glass effect with blur and transparency.\r\n\r\n#### Minimal\r\n```javascript\r\ntoast.show(\"Simple & clean\", { type: \"success\", style: \"minimal\" });\r\n```\r\nTransparent background with just a colored left border.\r\n\r\n#### Bold\r\n```javascript\r\ntoast.show(\"Eye-catching!\", { type: \"success\", style: \"bold\" });\r\n```\r\nSolid colors with prominent drop shadow.\r\n\r\n#### Outlined\r\n```javascript\r\ntoast.show(\"Outlined style\", { type: \"success\", style: \"outlined\" });\r\n```\r\nBordered design with transparent background.\r\n\r\n#### Soft\r\n```javascript\r\ntoast.show(\"Soft colors\", { type: \"success\", style: \"soft\" });\r\n```\r\nSoft pastel backgrounds with muted text colors.\r\n\r\n## Positioning\r\n\r\nSix positioning options are available:\r\n\r\n```javascript\r\n// Top positions\r\ntoast.show(\"Top left\", { position: \"top-left\" });\r\ntoast.show(\"Top center\", { position: \"top-center\" });\r\ntoast.show(\"Top right\", { position: \"top-right\" });\r\n\r\n// Bottom positions\r\ntoast.show(\"Bottom left\", { position: \"bottom-left\" });\r\ntoast.show(\"Bottom center\", { position: \"bottom-center\" });\r\ntoast.show(\"Bottom right\", { position: \"bottom-right\" });\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Multi-position Toasts\r\n\r\nToasts at different positions maintain separate queues and stack independently:\r\n\r\n```javascript\r\ntoast.show(\"Top right message\", { position: \"top-right\" });\r\ntoast.show(\"Bottom center message\", { position: \"bottom-center\" });\r\n// Both appear simultaneously without interference\r\n```\r\n\r\n### Chaining Operations\r\n\r\n```javascript\r\nconst notification = toast.show(\"Processing...\", { duration: 0 });\r\n\r\n// Later, dismiss it\r\nnotification.close();\r\n\r\n// Show a new toast\r\nsetTimeout(() => {\r\n  toast.show(\"Done!\", { type: \"success\" });\r\n}, 2000);\r\n```\r\n\r\n### Form Validation Example\r\n\r\n```javascript\r\nfunction handleSubmit(e) {\r\n  e.preventDefault();\r\n\r\n  if (!email) {\r\n    toast.show(\"Email is required\", { \r\n      type: \"error\",\r\n      position: \"top-center\"\r\n    });\r\n    return;\r\n  }\r\n\r\n  if (!password) {\r\n    toast.show(\"Password is required\", { \r\n      type: \"error\",\r\n      position: \"top-center\"\r\n    });\r\n    return;\r\n  }\r\n\r\n  // Submit form...\r\n  toast.show(\"Account created successfully!\", { \r\n    type: \"success\"\r\n  });\r\n}\r\n```\r\n\r\n## Styling & Customization\r\n\r\n### Style Options\r\n\r\nThe library includes 7 pre-designed styles that work beautifully with light and dark modes:\r\n\r\n```javascript\r\n// Standard gradient style (default)\r\ntoast.show(\"Standard\", { style: \"standard\" });\r\n\r\n// Modern neon glow\r\ntoast.show(\"Neon glow\", { style: \"neon\" });\r\n\r\n// Frosted glass effect\r\ntoast.show(\"Glass effect\", { style: \"glass\" });\r\n\r\n// Minimal with just a border\r\ntoast.show(\"Minimal\", { style: \"minimal\" });\r\n\r\n// Bold solid colors\r\ntoast.show(\"Bold\", { style: \"bold\" });\r\n\r\n// Bordered transparent\r\ntoast.show(\"Outlined\", { style: \"outlined\" });\r\n\r\n// Soft pastel tones\r\ntoast.show(\"Soft\", { style: \"soft\" });\r\n```\r\n\r\n### Custom Icons\r\n\r\nProvide any SVG as an icon:\r\n\r\n```javascript\r\nconst customIcon = '<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><!-- SVG path --></svg>';\r\n\r\ntoast.show(\"Custom styled!\", { \r\n  icon: customIcon,\r\n  style: \"neon\",\r\n  type: \"success\"\r\n});\r\n```\r\n\r\n### Titles & Rich Content\r\n\r\nAdd an optional title:\r\n\r\n```javascript\r\ntoast.show(\"Everything is working perfectly!\", { \r\n  type: \"success\",\r\n  title: \"System Status\",\r\n  style: \"bold\"\r\n});\r\n```\r\n\r\n### Overriding Styles\r\n\r\nThe CSS is injected automatically, but you can override styles:\r\n\r\n```html\r\n<style>\r\n  .js-toast {\r\n    min-width: 400px; /* Wider toasts */\r\n    font-size: 16px;  /* Larger text */\r\n  }\r\n\r\n  .js-toast.neon.success {\r\n    border-color: #00ff00; /* Custom neon color */\r\n  }\r\n</style>\r\n```\r\n\r\n### Custom Duration & Positioning\r\n\r\nAll options are customizable - adjust to fit your design:\r\n\r\n```javascript\r\ntoast.show(\"Custom styled toast\", {\r\n  type: \"warning\",\r\n  style: \"glass\",\r\n  duration: 5000,\r\n  position: \"bottom-left\"\r\n});\r\n```\r\n\r\n## Accessibility\r\n\r\n✅ ARIA live regions (`aria-live=\"polite\"`)  \r\n✅ Proper semantic roles (`role=\"status\"`, `role=\"region\"`)  \r\n✅ Atomic announcements (`aria-atomic=\"true\"`)  \r\n✅ Screen reader friendly  \r\n✅ Keyboard accessible  \r\n\r\nThe library uses:\r\n- `aria-live=\"polite\"` on containers for non-intrusive announcements\r\n- `role=\"status\"` for toast messages\r\n- `aria-atomic=\"true\"` for complete message announcements\r\n\r\n## Responsive Design\r\n\r\nThe library automatically adapts to different screen sizes:\r\n\r\n- **Desktop**: Standard sizing (280px - 450px width)\r\n- **Mobile**: Full width with margins (240px - calc(100vw - 40px))\r\n- **Margins**: Adjusted for smaller viewports\r\n\r\n## Dark Mode\r\n\r\nAutomatically detects system preferences using `prefers-color-scheme`:\r\n\r\n```css\r\n@media (prefers-color-scheme: dark) {\r\n  .js-toast {\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\r\n  }\r\n}\r\n```\r\n\r\nNo additional configuration needed!\r\n\r\n## Browser Support\r\n\r\n| Browser | Support |\r\n|---------|---------|\r\n| Chrome | ✅ All versions |\r\n| Firefox | ✅ All versions |\r\n| Safari | ✅ 10+ |\r\n| Edge | ✅ All versions |\r\n| IE 11 | ❌ Not supported |\r\n\r\n## Performance\r\n\r\n- **Bundle Size**: ~3KB (minified)\r\n- **Zero Dependencies**: Uses only standard APIs\r\n- **Efficient DOM**: Elements removed after animation\r\n- **Memory Efficient**: Automatic cleanup of empty containers\r\n\r\n## TypeScript Support\r\n\r\nWhile the library is written in JavaScript, you can use it in TypeScript projects. Type definitions can be added:\r\n\r\n```typescript\r\nimport toast from 'js-toast';\r\n\r\ntype ToastType = 'success' | 'error' | 'info' | 'warning';\r\ntype ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\r\n\r\ninterface ToastOptions {\r\n  type?: ToastType;\r\n  duration?: number;\r\n  position?: ToastPosition;\r\n}\r\n\r\ninterface ToastControl {\r\n  close(): void;\r\n}\r\n```\r\n\r\n## Examples Repository\r\n\r\nCheck out the [examples folder](#) for complete working examples:\r\n\r\n- Vanilla HTML\r\n- React\r\n- Vue\r\n- Angular\r\n- Next.js\r\n- Svelte\r\n\r\n## License\r\n\r\nMIT License - feel free to use in personal and commercial projects.\r\n\r\n## Support\r\n\r\nFound a bug? Have a feature request? [Open an issue](https://github.com/yourusername/js-toast/issues) on GitHub!\r\n\r\n## Changelog\r\n\r\n### v1.0.0\r\n- Initial release\r\n- 4 toast types (success, error, info, warning)\r\n- 6 positioning options\r\n- Smooth CSS animations\r\n- Smart toast queuing\r\n- Full accessibility support\r\n- Dark mode support\r\n- Mobile responsive\r\n\r\n---\r\n\r\nMade with ❤️ for developers who love simple, elegant solutions.\r\n","readmeFilename":"README.md","_rev":"1-9da3c9fa2c7b92af542f53430752a83c"}