toastifier - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

package.json

 {
   "name": "toastifier",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Light and Simple Multi-Framework Toaster",
@@ -5,0 +5,0 @@ "main": "script.js",

README.md

@@ -11,6 +11,6 @@ ## Installation
 ```jsx
-import React from 'react';
+import React from "react";
 
-import toastifier from 'toastifier';
-import 'toastifier/dist/toastifier.min.css';
+import toastifier from "toastifier";
+import "toastifier/dist/toastifier.min.css";
 
@@ -20,3 +20,3 @@ function App() {
     <div>
-      <button onClick={() => toastifier('Alert Check')}>Notify!</button>
+      <button onClick={() => toastifier("Alert Check")}>Notify!</button>
     </div>
@@ -29,6 +29,8 @@ );
 
+### You can play with our official Demo [here](https://toastifier.vercel.app/)
+
 <img src="https://imgur.com/ThbikEk.gif" alt="Image"/>    
 <br /><br /><br />
 
-  ## Documentation
+## Documentation
 
@@ -39,8 +41,8 @@ Check this to get you started!
 | -------------- | -------------- | ------------------------------------------ |
-| `type`         | `String`       | Toast Type                   |
-| `animation`    | `String`       | Animation Category           |
-| `duration`     | `Number`       | Duration for Animation .     |
+| `type`         | `String`       | Toast Type                                 |
+| `animation`    | `String`       | Animation Category                         |
+| `duration`     | `Number`       | Duration for Animation .                   |
 | `position`     | `String`       | Toast position on window.                  |
 | `onhoverPause` | `Boolean`      | pasue toast on hover.                      |
-| `showIcon`    | `Boolean`      | Show default SVG icons on toast            |
+| `showIcon`     | `Boolean`      | Show default SVG icons on toast            |
 | `onClick`      | `Function`     | Function to trriger events.                |
@@ -51,3 +53,3 @@ | `styleClass`   | `Class Object` | Object for Style Class.                    |
 | `border`       | `String`       | Border, by default based on toast type     |
-    
+
 <br />
@@ -57,9 +59,9 @@
 
-| Name           | Values                                                                       | Default    |
-| -------------- | ---------------------------------------------------------------------------- | ---------- |
-| `type`         | `error, success, warn, info`                                                 |`success`   |
-| `animation`    | `flip, bounce, fade, zoom`                                                   |`bounce`    |
-| `position`     | `top-left, top-center, top-right, bottom-left, bottom-center, bottom-right,` |`top-center`|
-| `onhoverPause` | `true/false`                                                                 |`false`     |
-| `showIcon`    | `true/false`                                                                  |`false`     |
+| Name           | Values                                                                       | Default      |
+| -------------- | ---------------------------------------------------------------------------- | ------------ |
+| `type`         | `error, success, warn, info`                                                 | `success`    |
+| `animation`    | `flip, bounce, fade, zoom`                                                   | `bounce`     |
+| `position`     | `top-left, top-center, top-right, bottom-left, bottom-center, bottom-right,` | `top-center` |
+| `onhoverPause` | `true/false`                                                                 | `false`      |
+| `showIcon`     | `true/false`                                                                 | `true`       |
 
@@ -71,26 +73,26 @@ <br />
 ```jsx
-import React from 'react';
+import React from "react";
 
-import toastifier from 'toastifier';
-import 'toastifier/dist/toastifier.min.css';
+import toastifier from "toastifier";
+import "toastifier/dist/toastifier.min.css";
 
 function App() {
   const toastfunction = () => {
-    alert('function Trigerred');
+    alert("function Trigerred");
   };
   const options = {
-    type: 'success',
+    type: "success",
     shadow: false,
-    animation: 'bounce',
+    animation: "bounce",
     duration: 3000,
-    position: 'top-center',
+    position: "top-center",
     onhoverPause: true,
     onClick: toastfunction,
     styleClass: {
-      background: '#22272e', // dark mode
-      text: '#fff',
-      border: '#eee',
+      background: "#22272e", // dark mode
+      text: "#fff",
+      border: "#eee",
     },
   };
-  const notify = () => toastifier('Boom! it Worked', options);
+  const notify = () => toastifier("Boom! it Worked", options);
 
@@ -97,0 +99,0 @@ return (

script.js

@@ -1,34 +0,33 @@
-function toastifier (msg, options = {}) {
+function toastifier(msg, options = {}) {
   if (typeof window) {
     var container;
-    var check = document.getElementById("listOfToasts");
+    var check = document.getElementById('listOfToasts');
     if (check) {
       container = check;
     } else {
-      container = document.createElement("div");
-      container.classList.add("toastifier__container");
-      container.id = "listOfToasts";
+      container = document.createElement('div');
+      container.classList.add('toastifier__container');
+      container.id = 'listOfToasts';
       document.body.append(container);
     }
-    var h = document.createElement("div");
-    var icon = document.createElement("div");
-    var message = document.createElement("div");
+    var h = document.createElement('div');
+    var icon = document.createElement('div');
+    var message = document.createElement('div');
     const svg = (val) => {
-      if (val === "error") {
+      if (val === 'error') {
         return `<img src="https://raw.githubusercontent.com/varun-singhh/Toastifier/main/images/toastifier_error.webp" height="15px" width="15px"/>`;
       }
-      if (val === "success") {
+      if (val === 'success') {
         return `<img src="https://raw.githubusercontent.com/varun-singhh/Toastifier/main/images/toastifier_success.webp" height="15px" width="15px"/>`;
       }
-      if (val === "info") {
+      if (val === 'info') {
         return `<img src="https://raw.githubusercontent.com/varun-singhh/Toastifier/main/images/toastifier_info.webp" height="15px" width="15px"/>`;
       }
-      if (val === "warn") {
+      if (val === 'warn') {
         return `<img src="https://raw.githubusercontent.com/varun-singhh/Toastifier/main/images/toastifier_warn.webp" height="15px" width="15px"/>`;
       }
     };
-    if (options.showIcon===false) {
-      icon.style.display="none";
-    }
-    else{
+    if (options.showIcon === false) {
+      icon.style.display = 'none';
+    } else {
       icon.innerHTML = `${svg(options.type || 'success')}`;
@@ -40,21 +39,19 @@ }
     h.appendChild(message);
-    icon.style.marginRight = "5px";
-    h.classList.add("toastifier__alert");
+    icon.style.marginRight = '5px';
+    h.classList.add('toastifier__alert');
     if (options.type) {
       h.classList.add(`toastifier__${options.type}`);
-    }
-    else {
+    } else {
       h.classList.add('toastifier__success');
     }
     if (options.shadow) {
-      h.classList.add("toastifier__shadow");
+      h.classList.add('toastifier__shadow');
     }
     if (options.position) {
       container.classList.add(`toastifier__${options.position}`);
-    }
-    else {
+    } else {
       container.classList.add('toastifier__top-center');
     }
     if (options.onClick) {
-      h.addEventListener("click", () => {
+      h.addEventListener('click', () => {
         options.onClick();
@@ -76,3 +73,3 @@ });
     let styles, styleExit;
-    if (options.animation === "slide") {
+    if (options.animation === 'slide') {
       styles = `
@@ -112,5 +109,3 @@ 0% {
           `;
-    }
-
-    else if (options.animation === "fade") {
+    } else if (options.animation === 'fade') {
       styles = `
@@ -132,5 +127,3 @@ 0% {
           `;
-    }
-
-    else if (options.animation === "zoom") {
+    } else if (options.animation === 'zoom') {
       styles = `
@@ -159,5 +152,3 @@ 0% {
           `;
-    }
-
-    else if (options.animation === "flip") {
+    } else if (options.animation === 'flip') {
       styles = `
@@ -207,5 +198,3 @@ 0% {
           `;
-    }
-
-    else if (options.animation === "bounce") {
+    } else if (options.animation === 'bounce') {
       styles = `
@@ -266,4 +255,3 @@ %,
           `;
-    }
-    else {
+    } else {
       styles = `
@@ -327,4 +315,4 @@ %,
     if (!styleSheet) {
-      styleSheet = document.createElement("style");
-      styleSheet.type = "text/css";
+      styleSheet = document.createElement('style');
+      styleSheet.type = 'text/css';
       document.head.appendChild(styleSheet);
@@ -341,3 +329,3 @@
     }
-    const animation_time = ((options.duration / 2 - 500) / 1000) || 1;
+    const animation_time = (options.duration / 2 - 500) / 1000 || 1;
     h.style.animation = `animated_entrance ${animation_time}s`;
@@ -348,24 +336,25 @@ const time1 = setTimeout(() => {
     const time2 = setTimeout(() => {
-      h.remove()
-      if(document.getElementsByClassName('toastifier__alert').length === 0 ){
-        container.remove()
+      h.remove();
+      if (document.getElementsByClassName('toastifier__alert').length === 0) {
+        container.remove();
       }
-    }, (options.duration + 1000 * animation_time) || 4000);
+    }, options.duration + 1000 * animation_time || 4000);
     if (options.onhoverPause) {
-        h.addEventListener('mouseover', () => {
-          clearTimeout(time1)
-          clearTimeout(time2)
+      h.addEventListener('mouseover', () => {
+        clearTimeout(time1);
+        clearTimeout(time2);
+      });
+      if (options.onhoverPause) {
+        h.addEventListener('mouseleave', () => {
+          h.style.animation = `animated_exit ${animation_time}s`;
+          setTimeout(() => {
+            h.style.display = 'none';
+            container.remove();
+          }, 800);
         });
-        if (options.onhoverPause) {
-          h.addEventListener('mouseleave', () => {
-            h.style.animation = `animated_exit ${animation_time}s`;
-            setTimeout(() => {
-              h.style.display = 'none';
-            }, 800);
-          });
-        }
       }
+    }
     container.appendChild(h);
   }
-};
+}
 module.exports = toastifier;

No alert changes

Improved metrics

Total package byte prevSize

17540

increased by0.55%

Number of lines in readme file

107

increased by1.9%

Worsened metrics

Lines of code

347

decreased by-1.98%

No dependency changes