├── .gitignore ├── LICENSE ├── README.md ├── builds ├── cdn.js └── module.js ├── dist ├── notifications.esm.js └── notifications.min.js ├── package-lock.json ├── package.json ├── scripts └── build.js └── src ├── createNotification.js ├── handleAutoClose.js ├── handleAutoRemove.js ├── handleClassNames.js ├── index.js ├── useFile.js └── useTemplate.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # misc 9 | .DS_Store 10 | *.pem 11 | 12 | # debug 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # local env files 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | # testing 24 | index.html 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Mark Mead 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Alpine JS Notifications 2 | 3 | Simple notifications in your projects using Alpine JS 🙋‍♀️ 4 | 5 | ## Install 6 | 7 | ### With a CDN 8 | 9 | ```html 10 | 14 | 15 | 16 | ``` 17 | 18 | ### With a Package Manager 19 | 20 | ```shell 21 | yarn add -D alpinejs-notify 22 | 23 | npm install -D alpinejs-notify 24 | ``` 25 | 26 | ```js 27 | import Alpine from 'alpinejs' 28 | import notifications from 'alpinejs-notify' 29 | 30 | Alpine.plugin(notifications) 31 | 32 | Alpine.start() 33 | ``` 34 | 35 | ## Example 36 | 37 | Let's create a simple notification that appears in the top right of the page and 38 | disappears after 5s. 39 | 40 | ```html 41 |
42 |
46 | 47 | 57 | 58 | 63 |
64 | ``` 65 | 66 | ### Options 67 | 68 | `notificationText` 69 | 70 | This is the string that will be rendered in the notification. 71 | 72 | _It is not part of the {}_ 73 | 74 | `wrapperId` 75 | 76 | This is the wrapping element of the notification. 77 | 78 | `templateId` 79 | 80 | This is the notification component HTML that will be added to the wrapper. 81 | 82 | `templateFile` 83 | 84 | This is an alternative choice to `templateId` which will get the notification 85 | component HTML from the file specified. 86 | 87 | `autoClose` 88 | 89 | This will set the attribute `data-notify-show` to `false` once the duration (in 90 | milliseconds) is up. 91 | 92 | `autoRemove` 93 | 94 | Here you have two options. 95 | 96 | **Duration** 97 | 98 | If you use a duration (in milliseconds) then it will remove the notification 99 | from the DOM once duration is up. 100 | 101 | This works for most situations, however it can get a little tricky calculating 102 | when the removal should happen when working with animations. This is what the 103 | boolean approach solves. 104 | 105 | **Boolean** 106 | 107 | Using a boolean will trigger the removal of the notification once the animation 108 | has ended. It will play the animation in full and then remove once complete. 109 | 110 | `classNames` 111 | 112 | A string of classes to add to the notification. 113 | 114 | ### Default Options 115 | 116 | You don't need to pass the same options for multiple notifications. If all your 117 | notifications are using the options from the example you can do this instead. 118 | 119 | ```html 120 | 128 | ``` 129 | 130 | Then all notifications that don't specify their own `notificationOptions` will 131 | use this. 132 | 133 | ## Animating Notifications 134 | 135 | In this example I'll be using Tailwind CSS, but you can easily replicate this 136 | with CSS. 137 | 138 | Let's say you want the notification to slide in from the right and then slide 139 | out, you could do the following. 140 | 141 | ```html 142 | 150 | ``` 151 | 152 | The `animate-slide-` classes have been added to the Tailwind CSS config. 153 | 154 | ```js 155 | module.exports = { 156 | theme: { 157 | extend: { 158 | animation: { 159 | 'slide-in': 'slide-in 0.15s ease-in forwards', 160 | 'slide-out': 'slide-out 0.15s ease-in forwards', 161 | }, 162 | keyframes: { 163 | 'slide-in': { 164 | '0%': { transform: 'translateX(100%)' }, 165 | '100%': { transform: 'translateX(0)' }, 166 | }, 167 | 'slide-out': { 168 | '0%': { transform: 'translateX(0)' }, 169 | '100%': { transform: 'translateX(100%)' }, 170 | }, 171 | }, 172 | }, 173 | }, 174 | } 175 | ``` 176 | 177 | ## Dismiss Notification 178 | 179 | If you want to have dismissible notifications you can add Alpine JS logic to 180 | your notification template. 181 | 182 | ```html 183 | 195 | ``` 196 | 197 | ## Using a File 198 | 199 | If preferred, you can create HTML files for your notification templates. 200 | 201 | ```html 202 |
203 | 204 | 214 | ``` 215 | 216 | This is now looking for a file called `notification.html` which might look 217 | something like this. 218 | 219 | ```html 220 | 221 | ``` 222 | 223 | It works the exact same as `templateId` but it means you don't have `