1.0.0 • Published 2 years ago
js-notifier v1.0.0
NotificationJS
NotificationJS is a personal project that I used to improve my front-end skills.
It is build completely using Javascript Vanilla, CSS3 and HTML5. No frameworks or third-party libraries used.
This project was inspired by React-toastify and Web dev Simplified.
Usage
import Toast from "/yourpathtothelib/Toast.js";
// instantiate toast
new Toast({
text: "Hello World! :) (very original huh)",
progressBar: true,
autoClose: 5000,
animation: "bounce"
})Features
- Define the lifetime of the toast
- Super customizable (styles, icons, type)
- Pause toast when the window loses focus
- Pause toast when the user hovers over it
- Has
onClosehook - Dark mode
- Define your animation
- Much more :D
Options
| Option | Type | Description |
|---|---|---|
| text | string | Sets the text content of the toast. |
| position | string | Places the toast container in one of the following positions: top-right, top-left, bottom-left, bottom-right. |
| onClose | function | Defines what should be done after the toast has been closed. |
| progressBar | bool | Defines if the toast should have a progress bar or not. |
| autoClose | number | bool | Sets the lifetime of the toast. If 0 or false the progress bar will not be displayed even if the progressBar option has been set to true. |
| closeOnClick | bool | If set to true makes the toast disappear when clicked. |
| pauseOnHover | bool | If set to true makes the "toast aging" paused when hovered. |
| pauseOnFocusLoss | bool | If set to true makes the "toast aging" paused when the window loses focus. Ex. the user navigates to a new tab. |
| newestOnTop | bool | If set to true makes the new toast appear above the others. |
| darkMode | bool | Sets the dark or the light theme. |
| type | string | Renders the toast with one of the following styles: default (light or dark), success, info, warning, danger, success-bg, info-bg, warning- bg, danger-bg. |
| styles | object | Allows to override the default styles of the toast such as background color, color, the color of the progress bar etc. |
| icon | string | Sets the icon that will rendered with the text. You must pass the d attribute of the path of an svg. |
| animation | string | Sets the animation the toast will perform when opened and closed. |
| draggable | bool | If set to true makes the toast draggable. When it gets dragged over a certain point, it will begin to fade. |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change :shipit:
People I'd like to mention
Again, I'd like to mention @fkhadra and @WebDevSimplified that inspired me to code this project.
License
License under MIT
1.0.0
2 years ago