{"id":16788792,"url":"https://github.com/markmead/alpinejs-notifications","last_synced_at":"2025-03-22T00:33:04.398Z","repository":{"id":98519185,"uuid":"559920355","full_name":"markmead/alpinejs-notifications","owner":"markmead","description":"Simple notifications in your projects using Alpine JS 🙋‍♀️","archived":false,"fork":false,"pushed_at":"2024-04-04T11:05:48.000Z","size":29,"stargazers_count":29,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-14T08:24:38.518Z","etag":null,"topics":["alpine-js","alpinejs","alpinejs-notification","alpinejs-plugin","javascript-notification","notifications"],"latest_commit_sha":null,"homepage":"https://js.hyperui.dev/examples/alert-notifications","language":"JavaScript","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/markmead.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}},"created_at":"2022-10-31T11:30:47.000Z","updated_at":"2024-10-10T19:13:17.000Z","dependencies_parsed_at":"2023-10-02T18:57:40.500Z","dependency_job_id":"afb8636a-8631-448e-b846-58e26063f1e7","html_url":"https://github.com/markmead/alpinejs-notifications","commit_stats":null,"previous_names":["markmead/alpinejs-notifications"],"tags_count":0,"template":false,"template_full_name":"markmead/alpinejs-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-notifications/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820905,"owners_count":16886225,"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":["alpine-js","alpinejs","alpinejs-notification","alpinejs-plugin","javascript-notification","notifications"],"created_at":"2024-10-13T08:24:47.786Z","updated_at":"2024-10-28T11:27:20.705Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine JS Notifications\n\nSimple notifications in your projects using Alpine JS 🙋‍♀️\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-notify@latest/dist/notifications.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D alpinejs-notify\n\nnpm install -D alpinejs-notify\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport notifications from 'alpinejs-notify'\n\nAlpine.plugin(notifications)\n\nAlpine.start()\n```\n\n## Example\n\nLet's create a simple notification that appears in the top right of the page and\ndisappears after 5s.\n\n```html\n\u003cdiv x-data\u003e\n  \u003cdiv\n    id=\"notificationWrapper\"\n    class=\"fixed top-4 w-64 right-4 space-y-2\"\n  \u003e\u003c/div\u003e\n\n  \u003cbutton\n    x-on:click=\"$notify('Hello there, I am a notification!', {\n    wrapperId: 'notificationWrapper',\n    templateId: 'notificationAlert',\n    autoClose: 3000,\n    autoRemove: 4000\n  })\"\n  \u003e\n    Notify\n  \u003c/button\u003e\n\n  \u003ctemplate id=\"notificationAlert\"\u003e\n    \u003cdiv role=\"alert\" class=\"text-white bg-red-500 p-4\"\u003e\n      {notificationText}\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/div\u003e\n```\n\n### Options\n\n`notificationText`\n\nThis is the string that will be rendered in the notification.\n\n_It is not part of the {}_\n\n`wrapperId`\n\nThis is the wrapping element of the notification.\n\n`templateId`\n\nThis is the notification component HTML that will be added to the wrapper.\n\n`templateFile`\n\nThis is an alternative choice to `templateId` which will get the notification\ncomponent HTML from the file specified.\n\n`autoClose`\n\nThis will set the attribute `data-notify-show` to `false` once the duration (in\nmilliseconds) is up.\n\n`autoRemove`\n\nHere you have two options.\n\n**Duration**\n\nIf you use a duration (in milliseconds) then it will remove the notification\nfrom the DOM once duration is up.\n\nThis works for most situations, however it can get a little tricky calculating\nwhen the removal should happen when working with animations. This is what the\nboolean approach solves.\n\n**Boolean**\n\nUsing a boolean will trigger the removal of the notification once the animation\nhas ended. It will play the animation in full and then remove once complete.\n\n`classNames`\n\nA string of classes to add to the notification.\n\n### Default Options\n\nYou don't need to pass the same options for multiple notifications. If all your\nnotifications are using the options from the example you can do this instead.\n\n```html\n\u003cscript\u003e\n  window.notificationOptions = {\n    wrapperId: 'notificationWrapper',\n    templateId: 'notificationAlert',\n    autoClose: 3000,\n    autoRemove: 4000,\n  }\n\u003c/script\u003e\n```\n\nThen all notifications that don't specify their own `notificationOptions` will\nuse this.\n\n## Animating Notifications\n\nIn this example I'll be using Tailwind CSS, but you can easily replicate this\nwith CSS.\n\nLet's say you want the notification to slide in from the right and then slide\nout, you could do the following.\n\n```html\n\u003ctemplate id=\"notificationAlert\"\u003e\n  \u003cdiv\n    role=\"alert\"\n    class=\"text-white bg-red-500 p-4 data-[notify-show=true]:animate-slide-in data-[notify-show=false]:animate-slide-out\"\n  \u003e\n    {notificationText}\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe `animate-slide-` classes have been added to the Tailwind CSS config.\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      animation: {\n        'slide-in': 'slide-in 0.15s ease-in forwards',\n        'slide-out': 'slide-out 0.15s ease-in forwards',\n      },\n      keyframes: {\n        'slide-in': {\n          '0%': { transform: 'translateX(100%)' },\n          '100%': { transform: 'translateX(0)' },\n        },\n        'slide-out': {\n          '0%': { transform: 'translateX(0)' },\n          '100%': { transform: 'translateX(100%)' },\n        },\n      },\n    },\n  },\n}\n```\n\n## Dismiss Notification\n\nIf you want to have dismissible notifications you can add Alpine JS logic to\nyour notification template.\n\n```html\n\u003ctemplate id=\"notificationAlert\"\u003e\n  \u003cdiv\n    x-data\n    role=\"alert\"\n    class=\"text-white bg-red-500 p-4 data-[notify-show=true]:animate-slide-in data-[notify-show=false]:animate-slide-out\"\n  \u003e\n    {notificationText}\n    \u003cbutton x-on:click=\"$root.setAttribute('data-notify-show', false)\"\u003e\n      Close\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Using a File\n\nIf preferred, you can create HTML files for your notification templates.\n\n```html\n\u003cdiv id=\"notificationWrapper\" class=\"fixed top-4 w-64 right-4 space-y-2\"\u003e\u003c/div\u003e\n\n\u003cbutton\n  x-on:click=\"$notify('Hello there, I am a notification!', {\n    wrapperId: 'notificationWrapper',\n    templateFile: 'notification.html',\n    autoClose: 3000,\n    autoRemove: 4000\n  })\"\n\u003e\n  Notify\n\u003c/button\u003e\n```\n\nThis is now looking for a file called `notification.html` which might look\nsomething like this.\n\n```html\n\u003cdiv role=\"alert\" class=\"text-white bg-red-500 p-4\"\u003e {notificationText} \u003c/div\u003e\n```\n\nIt works the exact same as `templateId` but it means you don't have `\u003ctemplate\u003e`\ntags in your HTML for your notification templates.\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-notify)\n![](https://img.shields.io/npm/v/alpinejs-notify)\n![](https://img.shields.io/npm/dt/alpinejs-notify)\n![](https://img.shields.io/github/license/markmead/alpinejs-notifications)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-notifications/lists"}