{"id":24499638,"url":"https://github.com/codewithkyle/notifyjs","last_synced_at":"2025-04-14T05:33:31.942Z","repository":{"id":53539293,"uuid":"195405266","full_name":"codewithkyle/notifyjs","owner":"codewithkyle","description":"A lightweight JavaScript library for creating toast, snackbars, and notifications.","archived":false,"fork":false,"pushed_at":"2025-03-15T21:22:43.000Z","size":175,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T01:39:31.880Z","etag":null,"topics":["lightweight","notification","notifications","snackbar","snackbar-notification","toast","toast-notifications","web-components"],"latest_commit_sha":null,"homepage":"https://notifyjs.codewithkyle.com/","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/codewithkyle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-05T12:24:44.000Z","updated_at":"2025-03-15T21:15:16.000Z","dependencies_parsed_at":"2022-09-02T02:11:01.260Z","dependency_job_id":null,"html_url":"https://github.com/codewithkyle/notifyjs","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fnotifyjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fnotifyjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fnotifyjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithkyle%2Fnotifyjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithkyle","download_url":"https://codeload.github.com/codewithkyle/notifyjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248827498,"owners_count":21167887,"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":["lightweight","notification","notifications","snackbar","snackbar-notification","toast","toast-notifications","web-components"],"created_at":"2025-01-21T22:15:11.222Z","updated_at":"2025-04-14T05:33:31.933Z","avatar_url":"https://github.com/codewithkyle.png","language":"TypeScript","readme":"# Notify.js\n\nNotify.js is a lightweight utility library for creating toast, snackbars, and notifications.\n\n#### CSS Not Included\n\nThis library does not provide any CSS or base styling for the components / HTML Elements it produces. Example styles can be found at [Brixi UI](https://ui.brixi.dev/).\n\n- [Notifications](https://ui.brixi.dev/notifications)\n- [Toast](https://ui.brixi.dev/toast)\n- [Snackbar](https://ui.brixi.dev/snackbar)\n- Sonner (coming soon)\n\n## Installation\n\nDownload Notify.js via NPM:\n\n```sh\nnpm i --save @codewithkyle/notifyjs\n```\n\nOr use the CDN version:\n\n```javascript\nimport toaster from \"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/toaster.js\";\nimport snackbar from \"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/snackbar.js\";\nimport notifications from \"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/notifications.js\";\nimport sonner from \"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/sonner.js\";\n```\n\n## Usage\n\n1. [Snackbar Notification](#snackbar-notification)\n    1. [Snackbar Interface](#snackbar-interface)\n    1. [Snackbar HTML Structure](#snackbar-html-structure)\n1. [Notifications](#notifications)\n    1. [Notifications Interface](#notification-interface)\n    1. [Notifications HTML Structure](#notification-html-structure)\n1. [Toast Notification](#toast)\n    1. [Toast Interface](#toast-interface)\n    1. [Toast HTML Structure](#toast-html-structure)\n1. [Sonner Notification](#sonner)\n    1. [Sonner Interface](#sonner-interface)\n    1. [Sonner HTML Structure](#sonner-html-structure)\n\n### Global Manager\n\nImport the notification type:\n\n```typescript\nimport snackbar from \"@codewithkyle/notifyjs/snackbar\";\nsnackbar({\n    message: \"All snackbar notifications require a message\",\n});\n\n// Adds an action button\nsnackbar({\n    message: \"All snackbar notifications require a message\",\n    buttons: [\n        {\n            label: \"Update\",\n            callback: () =\u003e {\n                console.log(\"User clicked the update button\");\n            },\n        },\n    ],\n});\n```\n\n```typescript\nimport notifications from \"@codewithkyle/notifyjs/notifications\";\nnotifications.push({\n    title: \"Notificaitons require a title\",\n    message: \"They also require a message.\",\n});\n\n// Append custom toast notifications:\nclass CustomNotificationElement extends HTMLElement {\n    constructor(message){\n        super();\n        this.innerText = message;\n        setTimeout(() =\u003e {\n            this.remove();\n        }, 5000);\n    }\n}\nnotifications.append(new CustomNotificationElement());\n```\n\n```typescript\nimport toaster from \"@codewithkyle/notifyjs/toaster\";\ntoaster.push({\n    message: \"Toast notifications require a message.\"\n});\n```\n\n```typescript\nimport sonner from \"@codewithkyle/notifyjs/sonner\";\nsonner.push({\n    heading: \"Sonner toast example\",\n    message: \"Heading and message are optional.\"\n});\n```\n\n### Custom Events\n\nAs of version 5 you can trigger notifications using [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) dispatched on the `window`.\n\n```typescript\nconst event = new CustomEvent(\"notify:sonner\", {\n    detail: {\n        heading: \"Sonner Example\",\n        message: `Example sonner toast message.`,\n    }\n});\nwindow.dispatchEvent(event);\n```\n\nThe follow events are supported:\n\n- `notify:sonner`\n- `notify:alert`\n- `notify:toast`\n- `notify:snackbar`\n\nThe `detail` object accepts the same interfaces as the function versions (see below).\n\n### Custom Event Callbacks\n\nAs of version 5 all callback interfaces support  `event` and `eventData` properties. When the user interacts with a button a custom event will be fired on the `window`.\n\n```typescript\nimport sonner from \"@codewithkyle/notifyjs/sonner\";\nsonner.push({\n    message: \"Heading and message are optional.\",\n    button: {\n        label: \"Test\",\n        event: \"test-event\",\n        eventData: \"Hi mom!\",\n    }\n});\n\n// received when the user clicks the button within the sonner notification\nwindow.addEventListener(\"test-event\", (e)=\u003e{\n    alert(e.detail);\n});\n```\n\n---\n\n## Snackbar Notification\n\nSnackbar notifications are great for quick one-off notifications that require an action.\n\n### Snackbar Interface \n\n```typescript\ntype SnackbarNotification = {\n    message: string;\n    duration?: number; // in seconds\n    closeable?: boolean;\n    buttons?: Array\u003c{\n        label: string;\n        callback?: Function;\n        ariaLabel?: string;\n        classes?: Array\u003cstring\u003e | string;\n        autofocus?: boolean;\n        event?: string;\n        eventData?: any;\n    }\u003e;\n    force?: boolean; // defaults to true\n    classes?: Array\u003cstring\u003e | string;\n    autofocus?: boolean; // defaults to true\n}\n```\n\n### Snackbar HTML Structure\n\n```html\n\u003csnackbar-component\u003e\n    \u003cp\u003eCustom notification message\u003c/p\u003e\n    \u003csnackbar-actions\u003e\n        \u003cbutton\u003eAction\u003c/button\u003e\n        \u003cbutton class=\"close\"\u003e\n            \u003csvg /\u003e\n        \u003c/button\u003e\n    \u003c/snackbar-actions\u003e\n\u003c/snackbar-component\u003e\n```\n\n---\n\n## Notifications\n\nNotifications are great for application-like notification systems where users will need to recieve warnings, updates, successes, and errors.\n\n### Notification Interface \n\n```typescript\ntype Notification = {\n    title: string;\n    message: string;\n    closeable?: boolean;\n    icon?: string; // svg or img\n    duration?: number; // in seconds\n    classes?: string[];\n    autofocus?: boolean; // defaults to true\n    buttons?: Array\u003c{\n        label: string;\n        callback?: Function;\n        ariaLabel?: string;\n        classes?: Array\u003cstring\u003e | string;\n        autofocus?: boolean;\n        event?: string;\n        eventData?: any;\n    }\u003e;\n    timer?: \"vertical\" | \"horizontal\" | null; // defaults to null\n};\n```\n\n### Notification HTML Structure\n\n```html\n\u003cnotifications-component\u003e\n    \u003cnotification-component\u003e\n        \u003ci\u003e\n            \u003csvg /\u003e\n        \u003c/i\u003e\n        \u003ccopy-wrapper\u003e\n            \u003ch3\u003eTitle\u003c/h3\u003e\n            \u003cp\u003eCustom notification message\u003c/p\u003e\n            \u003cnotification-actions\u003e\n                \u003cbutton\u003eAction\u003c/button\u003e\n            \u003c/notification-actions\u003e\n        \u003c/copy-wrapper\u003e\n        \u003cbutton class=\"close\"\u003e\n            \u003csvg /\u003e\n        \u003c/button\u003e\n        \u003cnotification-timer class=\"vertical || horizontal\"\u003e\u003c/notification-timer\u003e\n    \u003c/notification-component\u003e\n\u003c/notifications-component\u003e\n```\n\n---\n\n## Toast\n\nToast notifications are great for simple temporary alerts like \"Copied to clipboard\" or \"Added to playlist\".\n\n### Toast Interface \n\n```typescript\ntype ToastNotification = {\n    message: string;\n    duration?: number; // in seconds\n    classes?: string | string[];\n};\n```\n\n### Toast HTML Structure\n\n```html\n\u003ctoaster-component\u003e\n    \u003coutput role=\"status\"\u003eCustom toast message.\u003c/output\u003e\n\u003c/toaster-component\u003e\n```\n\n## Sonner\n\nSonner notifications are great for simple temporary alerts. The Sonner notification is slightly opinionated due to the custom interaction and animations.\n\n```css\nsonner-toast-component {\n    opacity: var(--opacity);\n    transform: translateY(var(--y)) translateY(var(--offset)) scale(var(--scale));\n    transition: transform 300ms var(--ease-in-out), opacity 300ms var(--ease-in-out);\n    left: 0;\n    bottom: 0;\n}\n```\n\n\u003e **Note**: the sonner components UX is based on the look and feel of the [Sonner react package](https://sonner.emilkowal.ski/).\n\n### Sonner Interface \n\n```typescript\ntype SonnerNotification = {\n    heading?: string,\n    message?: string,\n    duration?: number,\n    classes?: Array\u003cstring\u003e|string,\n    button?: {\n        callback?: Function,\n        label: string,\n        classes?: Array\u003cstring\u003e|string,\n        event?: string;\n        eventData?: any;\n    }\n};\n```\n\n### Sonner HTML Structure\n\n```html\n\u003csonner-component\u003e\n    \u003csonner-toast-component\u003e\n        \u003ccopy-wrapper\u003e\n            \u003ch3\u003eExample heading\u003c/h3\u003e\n            \u003cp\u003eThis is an example sonner message.\u003c/p\u003e\n        \u003c/copy-wrapper\u003e\n        \u003cbutton\u003eClick me\u003c/button\u003e\n    \u003c/sonner-toast-component\u003e\n\u003c/sonner-component\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fnotifyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithkyle%2Fnotifyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithkyle%2Fnotifyjs/lists"}