{"id":18258612,"url":"https://github.com/whizzes/svelte-notifications","last_synced_at":"2026-05-15T21:36:22.166Z","repository":{"id":157009132,"uuid":"633011224","full_name":"whizzes/svelte-notifications","owner":"whizzes","description":"Svelte Library to Manage UI Notifications","archived":false,"fork":false,"pushed_at":"2024-02-19T23:23:32.000Z","size":436,"stargazers_count":1,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T23:26:37.020Z","etag":null,"topics":["notifications","package","svelte"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/whizzes.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":"2023-04-26T15:32:49.000Z","updated_at":"2024-04-27T22:23:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"83968865-e553-415a-84ea-589c807e25b9","html_url":"https://github.com/whizzes/svelte-notifications","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/whizzes/svelte-notifications","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzes%2Fsvelte-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzes%2Fsvelte-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzes%2Fsvelte-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzes%2Fsvelte-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whizzes","download_url":"https://codeload.github.com/whizzes/svelte-notifications/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzes%2Fsvelte-notifications/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266905261,"owners_count":24004141,"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-07-24T02:00:09.469Z","response_time":99,"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","package","svelte"],"created_at":"2024-11-05T10:33:11.788Z","updated_at":"2026-05-15T21:36:17.136Z","avatar_url":"https://github.com/whizzes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n  \u003ch1 align=\"center\"\u003esvelte-notifications\u003c/h1\u003e\n  \u003ch4 align=\"center\"\u003e\n    Svelte Library to Manage UI Notifications\n  \u003c/h4\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![Build](https://github.com/whizzes/svelte-notifications/workflows/build/badge.svg)\n![Tests](https://github.com/whizzes/svelte-notifications/workflows/test/badge.svg)\n![Lint](https://github.com/whizzes/svelte-notifications/workflows/lint/badge.svg)\n![Publish](https://github.com/whizzes/svelte-notifications/workflows/publish/badge.svg)\n[![Version](https://img.shields.io/npm/v/@whizzes/svelte-notifications.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-notifications)\n[![Downloads](https://img.shields.io/npm/dm/@whizzes/svelte-notifications.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-notifications)\n\n\u003c/div\u003e\n\n## Getting Started\n\nTo use the Svelte Notifications library in your Svelte application, you can install it using npm:\n\n```bash\nnpm install @whizzes/svelte-notifications\n```\n\n## Example\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import {\n    NotificationList,\n    notifications,\n    Position\n  } from '@whizzes/svelte-notifications';\n\n  const success = () =\u003e {\n    notifications.notifySuccess('Hello World!');\n  };\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{success}\"\u003eAppend Success\u003c/button\u003e\n\n\u003c!-- Notifications provider --\u003e\n\u003cNotificationList position=\"{Position.BottomRight}\" let:notification\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e{notification.title}\u003c/strong\u003e\n    \u003cp\u003e{notification.message}\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/NotificationList\u003e\n```\n\n## Usage\n\nImport the `NotificationList` component and use [Svelte's Slot Props](https://svelte.dev/tutorial/slot-props) to\nconsume a Notification's data.\n\n```javascript\nimport { NotificationList, notifications } from '@whizzes/svelte-notifications';\n```\n\n### Provide the NotificationList component\n\nThe NotificationList component is the container of the notifications. It should be placed at the layout of your application, so it can be visible in all the pages.\n\nYou can set the position of the notifications by passing the `position` prop to the NotificationList component. The available positions are the following using the `Position` enum:\n\n- `Position.TopLeft`\n- `Position.TopCenter`\n- `Position.TopRight`\n- `Position.BottomLeft`\n\n```html\n\u003cscript\u003e\n  import { NotificationList, Position } from '@whizzes/svelte-notifications';\n\u003c/script\u003e\n\n\u003cNotificationList position=\"{Position.BottomRight}\" let:notification\u003e\n  \u003c!-- Your notifications template --\u003e\n  \u003cli\u003e\n    \u003cstrong\u003e{notification.title}\u003c/strong\u003e\n    \u003cp\u003e{notification.message}\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/NotificationList\u003e\n```\n\n### Push a notification\n\nTo add a notification, you can use some of the methods available in the `notifications` object.\n\n```javascript\nimport { notifications } from '@whizzes/svelte-notifications';\n\n// Add a success notification\nnotifications.notifySuccess('Hello World!');\n// Add an error notification\nnotifications.notifyError('Hello World!');\n// Add a warning notification\nnotifications.notifyWarning('Hello World!');\n```\n\n## Development\n\n```bash\ngit clone git@github.com:whizzes/svelte-notifications.git\ncd ./svelte-notifications\nnpm i\nnpm run dev\n```\n\n## Contributing\n\nFeel free to open pull requests or issues on [our GitHub Repository][1].\n\n[1]: https://github.com/whizzes/svelte-notifications\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizzes%2Fsvelte-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhizzes%2Fsvelte-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizzes%2Fsvelte-notifications/lists"}