npm.io
1.0.0 • Published 4 years ago

js-notifier

Licence
ISC
Version
1.0.0
Deps
0
Size
23 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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 onClose hook
  • 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

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

Keywords

toastnotificationlibraryvanillajscss3html5es6