{"id":19358225,"url":"https://github.com/mzohaibqc/svelte-toasts","last_synced_at":"2025-10-10T21:32:18.559Z","repository":{"id":44080642,"uuid":"344258492","full_name":"mzohaibqc/svelte-toasts","owner":"mzohaibqc","description":"A highly configurable notification/toast component with individual toast state management capabilities.","archived":false,"fork":false,"pushed_at":"2024-03-14T13:15:31.000Z","size":1974,"stargazers_count":46,"open_issues_count":15,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-06T23:48:51.030Z","etag":null,"topics":["notifications","svelte","svelte-toasts","toasts"],"latest_commit_sha":null,"homepage":"https://mzohaibqc.github.io/svelte-toasts/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzohaibqc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2021-03-03T20:43:15.000Z","updated_at":"2025-05-28T20:56:00.000Z","dependencies_parsed_at":"2024-06-19T02:12:20.930Z","dependency_job_id":"8d2575e2-6830-4145-824e-ea5c1fad8e2a","html_url":"https://github.com/mzohaibqc/svelte-toasts","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"1aa7082aa42ba58c7723b52bfc64f8018e99fc69"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/mzohaibqc/svelte-toasts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fsvelte-toasts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fsvelte-toasts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fsvelte-toasts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fsvelte-toasts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzohaibqc","download_url":"https://codeload.github.com/mzohaibqc/svelte-toasts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fsvelte-toasts/sbom","scorecard":{"id":671812,"data":{"date":"2025-08-11","repo":{"name":"github.com/mzohaibqc/svelte-toasts","commit":"1aa7082aa42ba58c7723b52bfc64f8018e99fc69"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/5 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"53 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-wv8q-r932-8hc7","Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T20:21:01.369Z","repository_id":44080642,"created_at":"2025-08-21T20:21:01.369Z","updated_at":"2025-08-21T20:21:01.369Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005413,"owners_count":26083883,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["notifications","svelte","svelte-toasts","toasts"],"created_at":"2024-11-10T07:10:49.847Z","updated_at":"2025-10-10T21:32:18.542Z","avatar_url":"https://github.com/mzohaibqc.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./site/public/images/logo.svg\" alt=\"Logo\" style=\"height: 100px; display:block; margin: 0 auto;\" /\u003e\n\n# Svelte-Toasts\n\nA highly configurable toast/notification component with individual toast state management capabilities.\n\n## Demo \u0026 Docs\n\nhttps://mzohaibqc.github.io/svelte-toasts/\n\nREPL: https://svelte.dev/repl/ff34bad88213493ab878c71497c01152?version=3.35.0\n\n## \u003cimg src=\"./site/public/images/dynamic-toast.gif\" alt=\"Dynamic Toast\"\u003e\n\n#### Flat Toast\n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"./site/public/images/flat-dark.png\" width=\"320px\" alt=\"Light theme toasts\"\u003e\n    \u003cimg src=\"./site/public/images/flat-light.png\" width=\"320px\" alt=\"Dark theme toasts\"\u003e\n\u003c/p\u003e\n\n#### Bootstrap Toast\n\n\u003cp float=\"left\"\u003e\n    \u003cimg src=\"./site/public/images/bootstrap-dark.png\" width=\"320px\" alt=\"Light theme toasts\"\u003e\n    \u003cimg src=\"./site/public/images/bootstrap-light.png\" width=\"320px\" alt=\"Dark theme toasts\"\u003e\n\u003c/p\u003e\n\n## Install\n\n\u003e npm i svelte-toasts\n\nor if you are using yarn\n\n\u003e yarn add svelte-toasts\n\n## Getting Started\n\n```javascript\n\u003cscript\u003e\n  import { toasts, ToastContainer, FlatToast, BootstrapToast }  from \"svelte-toasts\";\n\n  const showToast = () =\u003e {\n    const toast = toasts.add({\n      title: 'Message title',\n      description: 'Message body',\n      duration: 10000, // 0 or negative to avoid auto-remove\n      placement: 'bottom-right',\n      type: 'info',\n      theme: 'dark',\n      placement: 'bottom-right',\n      type: 'success',\n      theme,\n      onClick: () =\u003e {},\n      onRemove: () =\u003e {},\n      // component: BootstrapToast, // allows to override toast component/template per toast\n    });\n\n    // toast.remove()\n\n  };\n\u003c/script\u003e\n\n\u003cmain class=\"flex flex-col container items-center mt-10\"\u003e\n\t\u003ch1 class=\"text-lg block text-center\"\u003eSvelte Toasts\u003c/h1\u003e\n  \u003cbutton on:click={showToast}\u003eShow Toast\u003c/button\u003e\n  \u003cToastContainer placement=\"bottom-right\" let:data={data}\u003e\n    \u003cFlatToast {data} /\u003e \u003c!-- Provider template for your toasts --\u003e\n  \u003c/ToastContainer\u003e\n\u003c/main\u003e\n```\n\nEvery `toast` object has following structure:\n\n```javascript\n{\n  title: \"Welcome\",\n  description: \"Thanks for trying svelte-toasts!\",\n  uid: 1615153277482,\n  placement: \"bottom-right\",\n  type: \"success\",\n  theme: \"dark\",\n  duration: 0,\n  remove: () =\u003e { /* implementation */ },\n  update: () =\u003e { /* implementation */ },\n  onClick: () =\u003e { console.log(\"Toast clicked\"); }\n  onRemove: () =\u003e { console.log(\"Toast removed\"); },\n  // and whatever properties that you want to add when calling toasts.add(options)\n}\n```\n\nBelow is a detail description of every property.\n\n\u003ctable class=\"min-w-full divide-y divide-gray-200\"\u003e\u003cthead class=\"bg-gray-100\"\u003e\u003ctr\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eProp \u003c/th\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eType \u003c/th\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eDefault \u003c/th\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eDescription \u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody class=\"bg-white divide-y divide-gray-200\"\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003etitle\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003estring\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eTitle of toast\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003edescription\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003estring\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eDescription/body of toast\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eremove\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eInvoking remove method will remove the respective toast object from store/UI. e.g. toast1.remove()\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eupdate\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eInvoke update method to update a specific toast values like title, description or duration etc. toast.update({ title; \"Progress: 80%\" })\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eonClick\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e() =\u0026gt; {}\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eYou can provide onClick callback which will be invoked when toast will be clicked (except toast close icon/button)\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eonRemove\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e() =\u0026gt; {}\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eYou can provide onRemove callback which will be invoked when toast will be auto removed or removed by clicking on cross icon/button.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003ecomponent\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eSvelte Component\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eYou can provide your own toast component to render toast for a specific toast object\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eplacement\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003estring\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eSet placement of current toast, it will override default placement set by ToastContainer\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eshowProgress\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eboolean\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eIf set to \"true\" and duration is greater than 0 then a timeout progress bar will be shown at the bottom of current toast. It will override default value set by ToastContainer.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003etheme\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003estring\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e\"dark\" and \"light\" themes are implemented for builtin Toast components but in case of your own Toast component, you can implement or leave this feature. This will override default value set by ToastContainer if you are using builtin Toast components.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003etype\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003estring\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFour types of toasts are available i.e. success, info, error and warning. It will override toast type set by ToastContainer.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eduration\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003enumber\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"min-width: 150px\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003e-\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eDuration in milliseconds after which toast will be auto removed. If duration will be 0 or negative, toast will not be auto removed but user can click on cross icon to remove it. It will override duration specified by ToastContainer.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n### Helper Methods\n\nYou can use helper functions to create toast with just message argument.\n\n\u003e toasts.success('Message body here'); // just 1 argument\n\n\u003e toasts.success('Message Title', 'Message body here'); // 2 arguments, title, description\n\n\u003e toasts.success('Message Title', 'Message body here', { duration: 5000 }); // 3 arguments, title, description and all other options object\n\nSimilarly,\ntoasts.info(), toasts.warning() and toasts.error()\n\n## Docs\n\n## Store\n\n- [`ToastStore`](#ToastStore)\n\n## Components\n\n- [`BootstrapToast`](#bootstraptoast)\n- [`FlatToast`](#flattoast)\n- [`ToastContainer`](#toastcontainer)\n\n---\n\n## `ToastStore`\n\n```javascript\nimport { toasts } from 'svelte-toasts';\n```\n\nStore `toasts` contains an array of toasts objects. It has following methods:\n\n\u003ctable class=\"min-w-full divide-y divide-gray-200\"\u003e\u003cthead class=\"bg-gray-100\"\u003e\u003ctr\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eName \u003c/th\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eType \u003c/th\u003e\u003cth scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\"\u003eDescription \u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody class=\"bg-white divide-y divide-gray-200\"\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eadd\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eThis is key function to show toast. You can pass options and modify the generated toast. It will return toast object which you can use to modify or remove that specific toast programmatically, e.g. toast1.update({ title: 'New Title'})\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eremoveAll\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eThis function removes all toasts and clears store state to empty array\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eremoveLast\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eThis function removes one toast (if any) that was generated at the end\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003egetById\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eThis function returns toast data for given id. Every toast has a unique uid\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003esetDefaults\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eThis function sets default options so you don't need to pass those options again and again, e.g. theme, placement etc.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003esuccess\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eShow success/green toast.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003einfo\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eShow info/blue toast.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003eerror\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eShow error/red toast.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 text-bold\"\u003ewarning\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eFunction\u003c/div\u003e\u003c/td\u003e\u003ctd class=\"px-6 py-4\" style=\"\"\u003e\u003cdiv class=\"text-sm text-gray-600 undefined\"\u003eShow warning/orange toast.\u003c/div\u003e\u003c/td\u003e \u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n## `BootstrapToast`\n\n```javascript\nimport { BootstrapToast } from 'svelte-toasts';\n```\n\n### Props\n\n| Prop name | Kind             | Reactive | Type                                    | Default value        | Description                  |\n| :-------- | :--------------- | :------- | :-------------------------------------- | -------------------- | ---------------------------- |\n| theme     | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [Theme](#theme)\u003c/code\u003e           | \u003ccode\u003e'light'\u003c/code\u003e | Default theme for all toasts |\n| data      | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [ToastProps](#ToastProps)\u003c/code\u003e | \u003ccode\u003e{}\u003c/code\u003e      | Default theme for all toasts |\n\n### Slots\n\n| Slot name  | Default | Props | Fallback                                                                                                                                                                                                                                                                                                                                                                   |\n| :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| close-icon | No      | --    | \u003ccode\u003e\u0026lt;svg\u003cbr /\u003e xmlns=\"http://www.w3.org/2000/svg\"\u003cbr /\u003e class=\"bx--toast-notification\\_\\_close-icon\"\u003cbr /\u003e width=\"20\"\u003cbr /\u003e height=\"20\"\u003cbr /\u003e viewBox=\"0 0 32 32\"\u003cbr /\u003e aria-hidden=\"true\"\u003cbr /\u003e \u0026gt;\u003cbr /\u003e \u0026lt;path\u003cbr /\u003e d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"\u003cbr /\u003e /\u0026gt;\u003cbr /\u003e \u0026lt;/svg\u0026gt;\u003c/code\u003e |\n| extra      | No      | --    | --                                                                                                                                                                                                                                                                                                                                                                         |\n| icon       | No      | --    | \u003ccode\u003eSvg icons based on type\u003ccode\u003e                                                                                                                                                                                                                                                                                                                                        |\n\n### Events\n\nNone.\n\n## `FlatToast`\n\n```javascript\nimport { FlatToast } from 'svelte-toasts';\n```\n\n### Props\n\n| Prop name | Kind             | Reactive | Type                                     | Default value        | Description                  |\n| :-------- | :--------------- | :------- | :--------------------------------------- | -------------------- | ---------------------------- |\n| theme     | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [Theme](#theme) \u003c/code\u003e           | \u003ccode\u003e'light'\u003c/code\u003e | Default theme for all toasts |\n| data      | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [ToastProps](#ToastProps) \u003c/code\u003e | \u003ccode\u003e{}\u003c/code\u003e      | Default theme for all toasts |\n\n### Slots\n\n| Slot name  | Default | Props | Fallback                                                                                                                                                                                                                                                                                                                                                                   |\n| :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| close-icon | No      | --    | \u003ccode\u003e\u0026lt;svg\u003cbr /\u003e xmlns=\"http://www.w3.org/2000/svg\"\u003cbr /\u003e class=\"bx--toast-notification\\_\\_close-icon\"\u003cbr /\u003e width=\"20\"\u003cbr /\u003e height=\"20\"\u003cbr /\u003e viewBox=\"0 0 32 32\"\u003cbr /\u003e aria-hidden=\"true\"\u003cbr /\u003e \u0026gt;\u003cbr /\u003e \u0026lt;path\u003cbr /\u003e d=\"M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z\"\u003cbr /\u003e /\u0026gt;\u003cbr /\u003e \u0026lt;/svg\u0026gt;\u003c/code\u003e |\n| extra      | No      | --    | --                                                                                                                                                                                                                                                                                                                                                                         |\n| icon       | No      | --    | \u003ccode\u003eSvg icons based on type\u003ccode\u003e                                                                                                                                                                                                                                                                                                                                        |\n\n### Events\n\nNone.\n\n## `ToastContainer`\n\n```javascript\nimport { ToastContainer } from 'svelte-toasts';\n```\n\n### Props\n\n| Prop name    | Kind             | Reactive | Type                                   | Default value               | Description                                                            |\n| :----------- | :--------------- | :------- | :------------------------------------- | --------------------------- | ---------------------------------------------------------------------- |\n| theme        | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [Theme](#Theme) \u003c/code\u003e         | \u003ccode\u003e'dark'\u003c/code\u003e         | Default theme for all toasts                                           |\n| placement    | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [Placement](#Placement) \u003c/code\u003e | \u003ccode\u003e'bottom-right'\u003c/code\u003e | Default placement for all toasts                                       |\n| type         | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e [ToastType](#ToastType) \u003c/code\u003e | \u003ccode\u003e'info'\u003c/code\u003e         | Default type of all toasts                                             |\n| showProgress | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e boolean \u003c/code\u003e                 | \u003ccode\u003efalse\u003c/code\u003e          | Show progress if showProgress is true and duration is greater then 0   |\n| duration     | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e number \u003c/code\u003e                  | \u003ccode\u003e3000\u003c/code\u003e           | Default duration for all toasts to auto close. 0 to disable auto close |\n| width        | \u003ccode\u003elet\u003c/code\u003e | No       | \u003ccode\u003e 'string' \u003c/code\u003e                | \u003ccode\u003e'320px'\u003c/code\u003e        | Width of all toasts                                                    |\n\n### Slots\n\n| Slot name | Default | Props                                             | Fallback |\n| :-------- | :------ | :------------------------------------------------ | :------- |\n| --        | Yes     | \u003ccode\u003e{ data: [ToastProps](#ToastProps) } \u003c/code\u003e | --       |\n\n### Events\n\nNone.\n\n## Types\n\n#### `Theme`\n\n```ts\nexport type Theme = 'dark' | 'light';\n```\n\n#### `ToastType`\n\n```ts\nexport type ToastType = 'success' | 'info' | 'error' | 'warning';\n```\n\n#### `Placement`\n\n```ts\nexport type Placement =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-right'\n  | 'top-left'\n  | 'top-center'\n  | 'bottom-center'\n  | 'center-center';\n```\n\n#### `ToastProps`\n\n```ts\nexport interface ToastProps {\n  uid: number;\n  title?: string;\n  description: string;\n  duration: number;\n  type: ToastType;\n  theme?: Theme;\n  placement: Placement;\n  showProgress?: boolean;\n  remove?: Function;\n  update?: Function;\n  onRemove?: Function;\n  onClick?: Function;\n}\n```\n\n#### `ToastStore`\n\n```ts\nexport interface ToastStore extends Writable\u003cToastProps[]\u003e {\n  add(options: Partial\u003cToastProps\u003e): ToastProps;\n  success(options: Partial\u003cToastProps\u003e): ToastProps;\n  success(description: string): ToastProps;\n  success(description: string, options: Partial\u003cToastProps\u003e): ToastProps;\n  success(\n    title: string,\n    description: string,\n    options?: Partial\u003cToastProps\u003e\n  ): ToastProps;\n\n  info(options: Partial\u003cToastProps\u003e): ToastProps;\n  info(description: string): ToastProps;\n  info(description: string, options: Partial\u003cToastProps\u003e): ToastProps;\n  info(\n    title: string,\n    description: string,\n    options?: Partial\u003cToastProps\u003e\n  ): ToastProps;\n\n  error(options: Partial\u003cToastProps\u003e): ToastProps;\n  error(description: string): ToastProps;\n  error(description: string, options: Partial\u003cToastProps\u003e): ToastProps;\n  error(\n    title: string,\n    description: string,\n    options?: Partial\u003cToastProps\u003e\n  ): ToastProps;\n\n  warning(options: Partial\u003cToastProps\u003e): ToastProps;\n  warning(description: string): ToastProps;\n  warning(description: string, options: Partial\u003cToastProps\u003e): ToastProps;\n  warning(\n    title: string,\n    description: string,\n    options?: Partial\u003cToastProps\u003e\n  ): ToastProps;\n\n  getById(uid: number): ToastProps;\n  clearAll(): void;\n  clearLast(): void;\n  setDefaults(options: Partial\u003cToastProps\u003e): void;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fsvelte-toasts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzohaibqc%2Fsvelte-toasts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fsvelte-toasts/lists"}