{"id":28906113,"url":"https://github.com/waleedsalah4/notification-system","last_synced_at":"2026-05-04T01:33:47.996Z","repository":{"id":296715391,"uuid":"994170528","full_name":"waleedsalah4/notification-system","owner":"waleedsalah4","description":"A customizable toast notification system for React, Angular, and Vue with built-in animations, positioning, auto-dismiss, and more.","archived":false,"fork":false,"pushed_at":"2026-03-13T01:21:14.000Z","size":599,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-13T07:55:27.964Z","etag":null,"topics":["alerts","angular","context-api","custom-toast","motion","pinia","reactjs","redux-toolkit","toast","toast-notifications","typescript","vue","zustand"],"latest_commit_sha":null,"homepage":"https://notification-toast.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waleedsalah4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-01T11:20:58.000Z","updated_at":"2026-03-13T01:21:18.000Z","dependencies_parsed_at":"2025-06-27T15:27:03.873Z","dependency_job_id":"780da586-1289-4070-b453-e71e92ba82df","html_url":"https://github.com/waleedsalah4/notification-system","commit_stats":null,"previous_names":["waleedsalah4/notification-system"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/waleedsalah4/notification-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleedsalah4%2Fnotification-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleedsalah4%2Fnotification-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleedsalah4%2Fnotification-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleedsalah4%2Fnotification-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waleedsalah4","download_url":"https://codeload.github.com/waleedsalah4/notification-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waleedsalah4%2Fnotification-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32591601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["alerts","angular","context-api","custom-toast","motion","pinia","reactjs","redux-toolkit","toast","toast-notifications","typescript","vue","zustand"],"created_at":"2025-06-21T14:02:34.142Z","updated_at":"2026-05-04T01:33:47.992Z","avatar_url":"https://github.com/waleedsalah4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔔 Notification Toast\n\nA customizable toast notification system with built-in animations, icons, positioning, delay appearance, and more.\n\nImplemented across **React**, **Angular**, and **Vue 3** — each in its own branch, each exploring a different approach to state management.\n\n![notification-toast](https://notification-toast.vercel.app/notification-toast.webp)\n\n---\n\n## 🚀 Features\n\n- ⚡ Simple one-liner API — `addToast()` / service injection / Pinia action\n- 🎨 8 built-in variants — Primary, Secondary, Success, Error, Warning, Info, Light, Dark\n- 📍 6 configurable positions — Top/Bottom · Left/Right/Center\n- 💨 Auto-dismiss with animated glowing progress bar\n- 🖱 Pause on hover — timer freezes on mouse-over\n- 🕒 Delay appearance — show toast after a short delay\n- 🧩 Optional title, custom message, and per-variant icons\n- 🔔 `onCloseToast` callback — fires on auto or manual dismiss\n- ✨ Fluid animations powered by **motion/react** and **motion-v**\n\n---\n\n## 📂 Branches\n\n| Branch | Framework | State Management |\n|---|---|---|\n| `main` | React | Redux Toolkit |\n| `toast-with-zustand` | React | Zustand |\n| `toast-with-context-api` | React | Context API + useReducer |\n| `toasts-in-angular` | Angular 17+ | Angular Signals |\n| `toasts-in-vue` | Vue 3 | Pinia |\n\n---\n\n## 🧱 Usage\n\n### React (Redux Toolkit)\n\n```tsx\ndispatch(addToast({\n  type: \"success\",\n  title: \"Done!\",\n  message: \"Your changes have been saved.\",\n  delayAppearance: false,\n  onCloseToast: () =\u003e console.log(\"closed\"),\n}));\n```\n\n### React (Zustand)\n\n```tsx\nconst { addToast } = useToastStore();\n\naddToast({\n  type: \"info\",\n  message: \"Zustand-powered toast!\",\n});\n```\n\n### React (Context API)\n\n```tsx\nconst { addToast } = useToastContext();\n\naddToast({\n  type: \"warning\",\n  title: \"Heads up\",\n  message: \"Context API toast, no extra libraries.\",\n});\n```\n\n### Angular\n\n```ts\n// inject\nprivate toastService = inject(ToastService);\n\nthis.toastService.addToast({\n  type: \"success\",\n  title: \"Success\",\n  message: \"Angular Signals-powered toast!\",\n  delayAppearance: false,\n});\n```\n\n### Vue 3 (Pinia)\n\n```ts\nconst toastStore = useToastStore();\n\ntoastStore.addToast({\n  type: \"success\",\n  title: \"Saved!\",\n  message: \"Vue 3 + Pinia toast.\",\n});\n```\n\n---\n\n## 📋 Props / API\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `type` | `ToastVariant` | **required** | Visual variant (success, error, info…) |\n| `message` | `string` | **required** | Main notification text |\n| `title` | `string` | `—` | Optional bold heading above the message |\n| `id` | `string` | auto | Unique ID — auto-generated if omitted |\n| `delayAppearance` | `boolean` | `false` | Show toast after a short delay (~1s) |\n| `onCloseToast` | `() =\u003e void` | `—` | Callback fired when toast is dismissed |\n\n---\n\n## 📦 Getting Started\n\nClone the repo and switch to your desired branch:\n\n```bash\ngit clone https://github.com/waleedsalah4/notification-system.git\ncd notification-system\n```\n\n### React (main / zustand / context-api)\n\n```bash\ngit checkout main   # or toast-with-zustand / toast-with-context-api\nnpm install\nnpm run dev\n```\n\n### Angular\n\n```bash\ngit checkout toasts-in-angular\nnpm install\nng serve\n```\n\n### Vue 3\n\n```bash\ngit checkout toasts-in-vue\nnpm install\nnpm run dev\n```\n\n---\n\n## 🛠 Built With\n\n### React branches\n\n- React 19 · TypeScript · Vite\n- Redux Toolkit / Zustand / Context API\n- Tailwind CSS · motion/react\n\n### Angular branch\n\n- Angular 17+ · TypeScript\n- Standalone Components · Angular Signals\n- Tailwind CSS\n\n### Vue 3 branch\n\n- Vue 3 · TypeScript · Vite\n- Pinia · motion-v\n- Tailwind CSS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaleedsalah4%2Fnotification-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaleedsalah4%2Fnotification-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaleedsalah4%2Fnotification-system/lists"}