{"id":13806037,"url":"https://github.com/zerodevx/svelte-toast","last_synced_at":"2025-05-14T02:08:42.640Z","repository":{"id":37466390,"uuid":"294703707","full_name":"zerodevx/svelte-toast","owner":"zerodevx","description":"Simple elegant toast notifications","archived":false,"fork":false,"pushed_at":"2025-01-22T09:37:30.000Z","size":1266,"stargazers_count":872,"open_issues_count":32,"forks_count":50,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-10T02:42:56.574Z","etag":null,"topics":["svelte3","toast-notifications","vanilla-js"],"latest_commit_sha":null,"homepage":"https://zerodevx.github.io/svelte-toast/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerodevx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"zerodevx"}},"created_at":"2020-09-11T13:32:16.000Z","updated_at":"2025-05-05T00:07:58.000Z","dependencies_parsed_at":"2024-04-10T01:49:44.843Z","dependency_job_id":"2cb65046-5c85-492f-b6bc-e05f29119e1d","html_url":"https://github.com/zerodevx/svelte-toast","commit_stats":{"total_commits":239,"total_committers":17,"mean_commits":"14.058823529411764","dds":0.07531380753138073,"last_synced_commit":"1c9ac2bef17249abadf0a1d2393bfaee3e756b7b"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerodevx","download_url":"https://codeload.github.com/zerodevx/svelte-toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253559499,"owners_count":21927604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte3","toast-notifications","vanilla-js"],"created_at":"2024-08-04T01:01:07.324Z","updated_at":"2025-05-14T02:08:37.628Z","avatar_url":"https://github.com/zerodevx.png","language":"Svelte","funding_links":["https://github.com/sponsors/zerodevx"],"categories":["Svelte","UI Components"],"sub_categories":["Notification"],"readme":"[![npm (scoped)](https://img.shields.io/npm/v/@zerodevx/svelte-toast/latest)](https://www.npmjs.com/package/@zerodevx/svelte-toast)\n[![Lines of code](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_loc.json)](https://github.com/AlDanial/cloc)\n[![Size minified](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_min.json)](https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast)\n[![Size gzipped](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_gzip.json)](https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast)\n\n# svelte-toast\n\n\u003e Simple elegant toast notifications.\n\nA feather-light and well-tested toast notification component for modern web frontends in\n[very](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/SvelteToast.svelte)\n[little](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/ToastItem.svelte)\n[lines](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/stores.js) of\n[code](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/index.js). Compiled (into UMD),\nit's only **20kB** minified (**8kB** gzipped) and can be used in Vanilla JS, or as a Svelte\ncomponent.\n\nBecause a demo helps better than a thousand API docs: https://zerodevx.github.io/svelte-toast/\n\n## Usage\n\nInstall the package:\n\n```bash\n$ npm i -D @zerodevx/svelte-toast\n```\n\nThe following are exported:\n\n- `SvelteToast` as the toast container;\n- `toast` as the toast controller.\n\n### Svelte\n\nIf you're using this in a Svelte app, import the toast container and place it in your app shell or\nroot layout.\n\n`+layout.svelte`:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n  import { SvelteToast } from '@zerodevx/svelte-toast'\n\n  // Optionally set default options here\n  const options = {\n    ...\n  }\n\u003c/script\u003e\n\n...\n\u003cSvelteToast {options} /\u003e\n```\n\nUse anywhere in your app - just import the toast controller.\n\n`MyComponent.svelte`:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n  import { toast } from '@zerodevx/svelte-toast'\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e toast.push('Hello world!')}\u003eSHOW TOAST\u003c/button\u003e\n```\n\n### Vanilla JS\n\nFor any other application with a bundler, something like this should work:\n\n```js\n// Import the compiled code from `/dist`\nimport { SvelteToast, toast } from '@zerodevx/svelte-toast/dist'\n\nconst app = new SvelteToast({\n  // Set where the toast container should be appended into\n  target: document.body,\n  props: {\n    options: {\n      // Optionally set default options here\n      ...\n    }\n  }\n})\n\ntoast.push('Hello world!')\n```\n\n### CDN\n\nOr if you prefer to go old-school javascript and a CDN:\n\n```html\n\u003chead\u003e\n  ...\n  \u003c!-- Load `toast` and `SvelteToast` into global scope  --\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast@0\"\u003e\u003c/script\u003e\n  \u003c!-- Register the app --\u003e\n  \u003cscript\u003e\n    const toastApp = new SvelteToast({\n      // Set where the toast container should be appended into\n      target: document.body,\n      props: {\n        options: {\n          // Optionally set default options here\n          ...\n        }\n      }\n    })\n\n    // Now you can `toast` anywhere!\n    toast.push('Hello world!')\n  \u003c/script\u003e\n\u003c/head\u003e\n```\n\n## Theming\n\nIn general, use CSS variables - the following (self-explanatory) vars are exposed:\n\n```css\n/**\n *         ._toastContainer\n *    ┌───────────────────────────────────────┐\n *    │    ._toastItem                        │\n *    │ ┌───────────────────────────────────┐ │\n *    │ │  ._toastMsg             ._toastBtn│ │\n *    │ │ ┌───────────────────────┐ ┌─────┐ │ │\n *    │ │ │                       │ │  ✕  │ │ │\n *    │ │ └───────────────────────┘ └─────┘ │ │\n *    │ │  ._toastBar                       │ │\n *    │ │ ═════════════════════════════════ │ │\n *    │ └───────────────────────────────────┘ │\n *    └───────────────────────────────────────┘\n */\n\n._toastContainer {\n  top: var(--toastContainerTop, 1.5rem);\n  right: var(--toastContainerRight, 2rem);\n  bottom: var(--toastContainerBottom, auto);\n  left: var(--toastContainerLeft, auto);\n  z-index: var(--toastContainerZIndex, 9999);\n}\n\n._toastItem {\n  width: var(--toastWidth, 16rem);\n  height: var(--toastHeight, auto);\n  min-height: var(--toastMinHeight, 3.5rem);\n  margin: var(--toastMargin, 0 0 0.5rem 0);\n  padding: var(--toastPadding, 0);\n  background: var(--toastBackground, rgba(66, 66, 66, 0.9));\n  color: var(--toastColor, #fff);\n  box-shadow: var(\n    --toastBoxShadow,\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06)\n  );\n  border: var(--toastBorder, none);\n  border-radius: var(--toastBorderRadius, 0.125rem);\n}\n\n._toastMsg {\n  padding: var(--toastMsgPadding, 0.75rem 0.5rem);\n}\n\n._toastBtn {\n  width: var(--toastBtnWidth, 2rem);\n  height: var(--toastBtnHeight, 100%);\n  font: var(--toastBtnFont, 1rem sans-serif);\n}\n\n._toastBtn::after {\n  content: var(--toastBtnContent, '✕');\n}\n\n._toastBar {\n  background: var(--toastBarBackground, rgba(33, 150, 243, 0.75));\n  top: var(--toastBarTop, auto);\n  right: var(--toastBarRight, auto);\n  bottom: var(--toastBarBottom, 0);\n  left: var(--toastBarLeft, 0);\n  height: var(--toastBarHeight, 6px);\n  width: var(--toastBarWidth, 100%);\n}\n```\n\nSo to apply your custom theme globally, do something like:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cstyle\u003e\n  :root {\n    --toastBackground: #abcdef;\n    --toastColor: #123456;\n    --toastHeight: 300px;\n    ...\n  }\n\u003c/style\u003e\n```\n\nTo apply CSS overrides to a particular Toast Item (on a per-toast basis), emit the toast with\noptions:\n\n```js\ntoast.push('Yo!', {\n  theme: {\n    '--toastBackground': 'cyan',\n    '--toastColor': 'black',\n    ...\n  }\n})\n```\n\nwhere `theme` is an object containing one or more CSS var key/value pairs.\n\n### Create Your Own Toast Actions\n\nFor convenient composing, you can either push toasts with\n[user-defined classes](#styling-with-user-defined-classes) (from `v0.7`), or create your own common\ntoast actions by stubbing them out. For example:\n\n`my-theme.js`\n\n```js\nimport { toast } from '@zerodevx/svelte-toast'\n\nexport const success = m =\u003e toast.push(m, {\n  theme: {\n    '--toastBackground': 'green',\n    '--toastColor': 'white',\n    '--toastBarBackground': 'olive'\n  }\n})\n\nexport const warning = m =\u003e toast.push(m, { theme: { ... } })\n\nexport const failure = m =\u003e toast.push(m, { theme: { ... } })\n```\n\nThen simply import these stubs in your consuming component:\n\n```js\nimport { success, warning, failure } from './my-theme'\n\n// Do something, then\nsuccess('It works!')\n```\n\n### Rich HTML\n\nToast messages can be in rich HTML too - for example:\n\n```js\n// Definitely not spam\ntoast.push(`\u003cstrong\u003eYou won the jackpot!\u003c/strong\u003e\u003cbr\u003e\n  Click \u003ca href=\"#\" target=\"_blank\"\u003ehere\u003c/a\u003e for details! 😛`)\n```\n\n### Custom Fonts and Styles\n\nIn a Svelte app, the quickest way to apply custom styles is to wrap the toast container then apply\nstyles on the wrapper:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cstyle\u003e\n  .wrap {\n    display: contents;\n    font-family: Roboto, sans-serif;\n    font-size: 0.875rem;\n    /* You can set CSS vars here too */\n    --toastBackground: pink;\n    ...\n  }\n  .wrap :global(strong) {\n    font-weight: 600;\n  }\n\u003c/style\u003e\n\n\u003cdiv class=\"wrap\"\u003e\n  \u003cSvelteToast /\u003e\n\u003c/div\u003e\n```\n\nIn Vanilla JS, simply apply your styles to the `._toastContainer` class:\n\n\u003c!-- prettier-ignore --\u003e\n```css\n._toastContainer {\n  font-family: Roboto, sans-serif;\n  --toastBackground: yellow;\n  ...\n}\n```\n\n## Features\n\n### New from `v0.4`\n\n#### Supporting Multiple Toast Containers\n\nIt's now easy to send toasts to different container targets within your app. For example:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n  import { SvelteToast, toast } from '@zerodevx/svelte-toast'\n\n  // Sends a toast to default toast container\n  toast.push('Yo!')\n\n  // Sends a toast to \"new\" toast container\n  toast.push('Hey!', { target: 'new' })\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  .wrap {\n    --toastContainerTop: 0.5rem;\n    --toastContainerRight: 2rem;\n    --toastContainerBottom: auto;\n    --toastContainerLeft: 2rem;\n    --toastWidth: 100%;\n    font-size: 0.875rem;\n    ...\n  }\n\u003c/style\u003e\n\n\u003c!-- Default toast container --\u003e\n\u003cSvelteToast /\u003e\n\n\u003c!-- Another toast container --\u003e\n\u003cdiv class=\"wrap\"\u003e\n  \u003c!-- Declare container with a unique `target` name --\u003e\n  \u003cSvelteToast target=\"new\" options={{ duration: 8000, intro: { y: -64 } }} /\u003e\n\u003c/div\u003e\n```\n\n#### Removing Multiple Toasts (Outdated)\n\n~~`pop()` now accepts a filter function.~~ This has been deprecated, but will remain for backward\ncompatibility until the next major. The recommended way to remove all toasts from a container target\n[has changed from `v0.9`](#removing-multiple-toasts).\n\n```js\n// Remove all toasts from \"new\" container\ntoast.pop((i) =\u003e i.target !== 'new') // DEPRECATED\n\n// Or remove ALL active toasts from ALL containers\ntoast.pop(0)\n```\n\n#### Accepting Object as First Param\n\n`push()` and `set()` can also take an object as its first parameter.\n\n```js\nlet id = toast.push('Yo!', { duration: 2000 })\n// ...is semantically equivalent to\nid = toast.push({ msg: 'Yo!', duration: 2000 })\n\ntoast.set(id, { msg: 'Waddup!' })\n// ...is semantically equivalent to\ntoast.set({ id, msg: 'Waddup!' })\n```\n\n### New from `v0.5`\n\n#### Pausable Toasts\n\nProgress bar tweens can now be paused when the mouse cursor (on desktop) is hovered over the toast\nitem. This behaviour is **disabled** by default. To enable, set option `pausable: true`.\n\n```js\ntoast.push('Hover me!', { pausable: true })\n```\n\n#### Send Svelte Component as a Message\n\nTo support complex UIs or workflows, a Svelte component can be pushed instead of a standard message\nif you're using this in a Svelte project. To do so, push options with `component` defined:\n\n```js\nimport MyCustomSvelteComponent from './MyCustomSvelteComponent.svelte'\n\ntoast.push({\n  component: {\n    src: MyCustomSvelteComponent, // set `src` to the component itself (required)\n    props: { ... },               // pass in `props` as key/value pairs (optional)\n    sendIdTo: 'toastId'           // forward toast id to `toastId` prop (optional)\n  },\n  ...                             // any other toast options\n})\n```\n\n### New from `v0.6`\n\n#### `onpop()` Callback Function\n\nA callback function can be run when a toast is closed. To do so, pass the function to the `onpop`\ntoast option:\n\n```js\ntoast.push('Hello world', {\n  onpop: (id) =\u003e {                // optionally get the toast id if needed\n    console.log(`${id} removed`)\n  },\n  ...                             // any other toast options\n})\n```\n\n### New from `v0.7`\n\n#### Styling with User-Defined Classes\n\nCustom class names can now be passed into each toast item. Very useful for composing toast actions,\nor implementing CSS-only dark modes.\n\n```html\n\u003cscript\u003e\n  toast.push('Foo', { classes: ['info'] }) // background green\n  toast.push('Bar', { classes: ['warn'] }) // background red\n\u003c/script\u003e\n\u003cSvelteToast options={{ classes: ['log'] }} /\u003e\n\u003cstyle\u003e\n  :global(.log.info) {\n    --toastBackground: green;\n  }\n  :global(.log.warn) {\n    --toastBackground: red;\n  }\n\u003c/style\u003e\n```\n\n### New from `v0.8`\n\n#### Auto-pause Toasts when Page Hidden\n\nThis feature uses the\n[Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) (if it's\nsupported) to pause/resume a toast whenever the browser tab visibility changes - allowing one to\nemit notifications in the background without it being dismissed prematurely. This now happens\nautomatically and is default behaviour, since notifications should by nature ensure that they're\nseen.\n\n#### Customise Dismiss Button\n\nAdditional CSS vars are exposed - specifically, `--toastBtnContent` allows the '✕' default character\nto be changed. As with CSS `content` keys for pseudo elements, `url()` can be used to load external\nor inline icons.\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cscript\u003e\n  import { toast, SvelteToast } from '@zerodevx/svelte-toast'\n\n  const options = {\n    theme: {\n      '--toastBtnContent': `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...\")`\n    }\n  }\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e toast.push('Hello!')}\u003eSHOW TOAST\u003c/button\u003e\n\n\u003cSvelteToast {options} /\u003e\n```\n\n### New from `v0.9`\n\n#### Removing Multiple Toasts\n\nRemoving all toasts from a particular container target has just become more _targeted_. Simply call\n`pop()` with param `{ target: 'containerName' }`, or call `pop(0)` to clear everything.\n\n```js\n// Remove all toasts from \"new\" container\ntoast.pop({ target: 'new' })\n\n// Or remove ALL active toasts from ALL containers\ntoast.pop(0)\n```\n\n#### Big Tooling Upgrade\n\nUnder the hood, the project's been migrated to\n[`svelte-package`](https://github.com/sveltejs/kit/tree/master/packages/package). For Svelte\nconsumers, this helps keep in sync with breaking changes that happen in Svelte-world. For other\nconsumers, there's a change in import path:\n\n```js\n// For non-Svelte users, import the compiled code\nimport { toast, SvelteToast } from '@zerodevx/svelte-toast/dist' // ESM\nconst { toast, SvelteToast } = require('@zerodevx/svelte-toast/dist') // CJS\n```\n\n## Toast Options\n\n\u003c!-- prettier-ignore --\u003e\n```js\n// Default options\nconst options = {\n  duration: 4000,       // duration of progress bar tween to the `next` value\n  initial: 1,           // initial progress bar value\n  next: 0,              // next progress value\n  pausable: false,      // pause progress bar tween on mouse hover\n  dismissable: true,    // allow dismiss with close button\n  reversed: false,      // insert new toast to bottom of stack\n  intro: { x: 256 },    // toast intro fly animation settings\n  theme: {},            // css var overrides\n  classes: []           // user-defined classes\n}\n```\n\n## Toast Methods\n\n```js\n/**\n * Send a new toast\n * @param {(string|SvelteToastOptions)} msg\n * @param {SvelteToastOptions} [opts]\n * @returns {number}\n */\nfunction push(msg, opts) { ... }\n\n/**\n * Remove toast(s)\n * @param {(number|Object\u003c'target',string\u003e)} [id]\n */\nfunction pop(id) { ... }\n\n/**\n * Update an existing toast\n * @param {(number|SvelteToastOptions)} id\n * @param {SvelteToastOptions} [opts]\n */\nfunction set(id, opts) { ... }\n```\n\n## Development\n\nPackaging is through [SvelteKit](https://kit.svelte.dev/docs/packaging). Standard Github\n[contribution workflow](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)\napplies.\n\n### Tests\n\nTesting is through [Playwright](https://playwright.dev/). To run the tests headlessly:\n\n```\n$ npm run test\n```\n\n## Changelog\n\nPlease refer to the [releases](https://github.com/zerodevx/svelte-toast/releases) page.\n\n## License\n\nISC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fsvelte-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerodevx%2Fsvelte-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fsvelte-toast/lists"}