react-toast - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/react-toast.cjs.development.js

@@ -9,3 +9,2 @@ 'use strict';
 var React__default = _interopDefault(React);
-var shortid = _interopDefault(require('shortid'));
 
@@ -57,3 +56,3 @@ var toastIcon = function toastIcon(_ref) {
 
-var css_248z = ":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.65;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n  min-height: 22px;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n";
+var css_248z = ":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.6;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n";
 styleInject(css_248z);
@@ -265,2 +264,3 @@
 
+// Generates a new toast object
 var toaster = function toaster(_ref) {
@@ -271,3 +271,3 @@ var content = _ref.content,
   return {
-    id: shortid.generate(),
+    id: Math.random().toString(36).substr(2, 10),
     content: content,
@@ -321,3 +321,3 @@ type: type,
 
-var css_248z$1 = ".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n";
+var css_248z$1 = ".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n";
 styleInject(css_248z$1);
@@ -324,0 +324,0 @@

dist/react-toast.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=t(n),r=t(require("shortid"));function o(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}o(":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.65;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n  min-height: 22px;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n");var a=function(t){var n=t.id,r=t.content,o=t.type,a=t.config,c=t.onClose;return e.createElement("div",{className:"toast "+o,style:{backgroundColor:(a=void 0===a?{}:a).backgroundColor,color:a.color}},e.createElement("div",{className:"icon"},function(t){switch(t.type){case"error":return e.createElement(l,null);case"info":return e.createElement(u,null);case"warning":return e.createElement(m,null);default:return e.createElement(i,null)}}({type:o})),e.createElement("div",{className:"content"},e.createElement("p",null,r)),e.createElement("div",{className:"close",onClick:function(){return c(n)}},e.createElement(l,null)))},c=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(.077 .077)"},e.createElement("g",null,e.createElement("path",{fill:"none",stroke:"#fff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",d:"M3.719 7.884L6.235 10.4l3.032-3.032 2.774-2.774"}))))},i=e.memo(c),s=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(.077 .077)"},e.createElement("g",null,e.createElement("path",{fill:"#fff",d:"M10.915 9.98l2.853-2.846a.666.666 0 00-.942-.942L9.979 9.044 7.133 6.191a.666.666 0 00-.942.942L9.044 9.98 6.19 12.826a.666.666 0 10.942.942l2.846-2.853 2.846 2.853a.666.666 0 10.942-.942z",transform:"translate(-2.017 -2.018)"}))))},l=e.memo(s),f=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(-1533 -39)"},e.createElement("g",{fill:"#fff",transform:"translate(-.358 -1.639)"},e.createElement("circle",{cx:"1.134",cy:"1.134",r:"1.134",transform:"rotate(180 771.246 22.823)"}),e.createElement("path",{d:"M1 0a1 1 0 00-1 1v5a1 1 0 002 0V1a1 1 0 00-1-1z",transform:"rotate(180 771.17 26.882)"}))))},u=e.memo(f),d=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"rotate(180 774.5 27.5)"},e.createElement("g",{fill:"#fff",transform:"translate(-.358 -1.639)"},e.createElement("circle",{cx:"1.134",cy:"1.134",r:"1.134",transform:"rotate(180 771.246 22.823)"}),e.createElement("path",{d:"M1 0a1 1 0 00-1 1v5a1 1 0 002 0V1a1 1 0 00-1-1z",transform:"rotate(180 771.17 26.882)"}))))},m=e.memo(d);function p(){return(p=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}var g,h={toasts:[]},E=function(t,n){switch(n.type){case"ADD":return p({},t,{toasts:[].concat(t.toasts,[n.toast])});case"REMOVE":return p({},t,{toasts:[].concat(t.toasts.filter((function(t){return t.id!==n.id})))});case"REMOVE_ALL":return p({},t,{toasts:[]});default:throw new Error}},x=function(){var t=new Map;return{on:function(n,e){t.has(n)||t.set(n,[]),t.get(n).push(e)},emit:function(n,e){t.has(n)&&t.get(n).forEach((function(t){return t(e)}))},off:function(){t.clear()}}}();!function(t){t.SHOW="show",t.HIDE="hide",t.HIDE_ALL="hideAll"}(g||(g={})),o(".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n");var v=function(t){var n=p({},t);return x.emit(g.SHOW,function(t){var n=t.content,e=t.type,o=t.config;return{id:r.generate(),content:n,type:e,config:o}}(p({},n)))},w=function(t,n){return v({content:t,type:"default",config:n})};w.success=function(t,n){return v({content:t,type:"success",config:n})},w.error=function(t,n){return v({content:t,type:"error",config:n})},w.info=function(t,n){return v({content:t,type:"info",config:n})},w.warn=function(t,n){return v({content:t,type:"warning",config:n})},w.hideAll=function(){return x.emit(g.HIDE_ALL)},exports.ToastContainer=function(t){var r,o=t.position,c=void 0===o?"bottom-left":o,i=t.delay,s=p({},(r=n.useReducer(E,h))[0],{dispatch:r[1]}),l=s.toasts,f=s.dispatch;n.useEffect((function(){return function(t){var n=t.dispatch,e=t.delay;x.on(g.SHOW,(function(t){n({type:"ADD",toast:t}),e&&setTimeout((function(){n({type:"REMOVE",id:t.id})}),e)})),x.on(g.HIDE,(function(t){return n({type:"REMOVE",id:t})})),x.on(g.HIDE_ALL,(function(){return n({type:"REMOVE_ALL"})}))}({dispatch:f,delay:i}),function(){x.off()}}),[f,i]);var u=n.useCallback((function(t){x.emit(g.HIDE,t)}),[]);return e.createElement("div",{className:"toastContainer "+c},l.map((function(t){return e.createElement(a,Object.assign({key:t.id},t,{onClose:u}))})))},exports.toast=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,n=require("react"),e=(t=n)&&"object"==typeof t&&"default"in t?t.default:t;function r(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}r(":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.6;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n");var o=function(t){var n=t.id,r=t.content,o=t.type,a=t.config,i=t.onClose;return e.createElement("div",{className:"toast "+o,style:{backgroundColor:(a=void 0===a?{}:a).backgroundColor,color:a.color}},e.createElement("div",{className:"icon"},function(t){switch(t.type){case"error":return e.createElement(s,null);case"info":return e.createElement(f,null);case"warning":return e.createElement(d,null);default:return e.createElement(c,null)}}({type:o})),e.createElement("div",{className:"content"},e.createElement("p",null,r)),e.createElement("div",{className:"close",onClick:function(){return i(n)}},e.createElement(s,null)))},a=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(.077 .077)"},e.createElement("g",null,e.createElement("path",{fill:"none",stroke:"#fff",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",d:"M3.719 7.884L6.235 10.4l3.032-3.032 2.774-2.774"}))))},c=e.memo(a),i=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(.077 .077)"},e.createElement("g",null,e.createElement("path",{fill:"#fff",d:"M10.915 9.98l2.853-2.846a.666.666 0 00-.942-.942L9.979 9.044 7.133 6.191a.666.666 0 00-.942.942L9.044 9.98 6.19 12.826a.666.666 0 10.942.942l2.846-2.853 2.846 2.853a.666.666 0 10.942-.942z",transform:"translate(-2.017 -2.018)"}))))},s=e.memo(i),l=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"translate(-1533 -39)"},e.createElement("g",{fill:"#fff",transform:"translate(-.358 -1.639)"},e.createElement("circle",{cx:"1.134",cy:"1.134",r:"1.134",transform:"rotate(180 771.246 22.823)"}),e.createElement("path",{d:"M1 0a1 1 0 00-1 1v5a1 1 0 002 0V1a1 1 0 00-1-1z",transform:"rotate(180 771.17 26.882)"}))))},f=e.memo(l),u=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},e.createElement("g",{transform:"rotate(180 774.5 27.5)"},e.createElement("g",{fill:"#fff",transform:"translate(-.358 -1.639)"},e.createElement("circle",{cx:"1.134",cy:"1.134",r:"1.134",transform:"rotate(180 771.246 22.823)"}),e.createElement("path",{d:"M1 0a1 1 0 00-1 1v5a1 1 0 002 0V1a1 1 0 00-1-1z",transform:"rotate(180 771.17 26.882)"}))))},d=e.memo(u);function m(){return(m=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}var p,g={toasts:[]},h=function(t,n){switch(n.type){case"ADD":return m({},t,{toasts:[].concat(t.toasts,[n.toast])});case"REMOVE":return m({},t,{toasts:[].concat(t.toasts.filter((function(t){return t.id!==n.id})))});case"REMOVE_ALL":return m({},t,{toasts:[]});default:throw new Error}},E=function(){var t=new Map;return{on:function(n,e){t.has(n)||t.set(n,[]),t.get(n).push(e)},emit:function(n,e){t.has(n)&&t.get(n).forEach((function(t){return t(e)}))},off:function(){t.clear()}}}();!function(t){t.SHOW="show",t.HIDE="hide",t.HIDE_ALL="hideAll"}(p||(p={})),r(".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n");var v=function(t){var n=m({},t);return E.emit(p.SHOW,function(t){var n=t.content,e=t.type,r=t.config;return{id:Math.random().toString(36).substr(2,10),content:n,type:e,config:r}}(m({},n)))},x=function(t,n){return v({content:t,type:"default",config:n})};x.success=function(t,n){return v({content:t,type:"success",config:n})},x.error=function(t,n){return v({content:t,type:"error",config:n})},x.info=function(t,n){return v({content:t,type:"info",config:n})},x.warn=function(t,n){return v({content:t,type:"warning",config:n})},x.hideAll=function(){return E.emit(p.HIDE_ALL)},exports.ToastContainer=function(t){var r,a=t.position,c=void 0===a?"bottom-left":a,i=t.delay,s=m({},(r=n.useReducer(h,g))[0],{dispatch:r[1]}),l=s.toasts,f=s.dispatch;n.useEffect((function(){return function(t){var n=t.dispatch,e=t.delay;E.on(p.SHOW,(function(t){n({type:"ADD",toast:t}),e&&setTimeout((function(){n({type:"REMOVE",id:t.id})}),e)})),E.on(p.HIDE,(function(t){return n({type:"REMOVE",id:t})})),E.on(p.HIDE_ALL,(function(){return n({type:"REMOVE_ALL"})}))}({dispatch:f,delay:i}),function(){E.off()}}),[f,i]);var u=n.useCallback((function(t){E.emit(p.HIDE,t)}),[]);return e.createElement("div",{className:"toastContainer "+c},l.map((function(t){return e.createElement(o,Object.assign({key:t.id},t,{onClose:u}))})))},exports.toast=x;
 //# sourceMappingURL=react-toast.cjs.production.min.js.map

dist/react-toast.esm.js

 import React, { useReducer, useEffect, useCallback } from 'react';
-import shortid from 'shortid';
 
@@ -49,3 +48,3 @@ var toastIcon = function toastIcon(_ref) {
 
-var css_248z = ":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.65;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n  min-height: 22px;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n";
+var css_248z = ":root {\n  --toast-default: #8b1dd0;\n  --toast-success: #27d0b2;\n  --toast-error: #c52965;\n  --toast-info: #004eff;\n  --toast-warning: #d0761d;\n  --toast-black: #221d26;\n  --toast-white: #ffffff;\n}\n\n.toast {\n  padding: 15px;\n  min-width: 300px;\n  max-width: 400px;\n  color: var(--toast-white);\n  display: flex;\n  align-items: flex-start;\n  line-height: 1.6;\n  font-size: 14px;\n  border-radius: 15px;\n}\n\n.toast.default {\n  background-color: var(--toast-default);\n}\n\n.toast.success {\n  background-color: var(--toast-success);\n}\n\n.toast.error {\n  background-color: var(--toast-error);\n}\n\n.toast.info {\n  background-color: var(--toast-info);\n}\n\n.toast.warning {\n  background-color: var(--toast-warning);\n}\n\n.toast .content {\n  flex: 1;\n}\n\n.toast .content p {\n  padding: 0;\n  margin: 0;\n}\n\n.toast .close {\n  margin-left: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0);\n  transition: all 100ms ease-in-out;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.toast .close:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.toast .icon {\n  margin-right: 10px;\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n}\n";
 styleInject(css_248z);
@@ -257,2 +256,3 @@
 
+// Generates a new toast object
 var toaster = function toaster(_ref) {
@@ -263,3 +263,3 @@ var content = _ref.content,
   return {
-    id: shortid.generate(),
+    id: Math.random().toString(36).substr(2, 10),
     content: content,
@@ -313,3 +313,3 @@ type: type,
 
-var css_248z$1 = ".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n";
+var css_248z$1 = ".toastContainer {\n  overflow: hidden;\n  overflow-x: auto;\n  display: grid;\n  grid-gap: 20px;\n  position: fixed;\n  user-select: none;\n}\n\n.top-left {\n  top: 20px;\n  left: 20px;\n}\n\n.top-center {\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.top-right {\n  top: 20px;\n  right: 20px;\n}\n\n.bottom-left {\n  bottom: 20px;\n  left: 20px;\n}\n\n.bottom-center {\n  bottom: 20px;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n\n.bottom-right {\n  bottom: 20px;\n  right: 20px;\n}\n";
 styleInject(css_248z$1);
@@ -316,0 +316,0 @@

dist/ToastContainer.d.ts

@@ -5,5 +5,3 @@ import { FC } from 'react';
 interface IToastContainer {
-    /** Position of toast */
     position?: Position;
-    /** Delay for toast */
     delay?: number;
@@ -10,0 +8,0 @@ }

package.json

 {
   "name": "react-toast",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A minimal toast notification package for React.",
@@ -70,5 +70,3 @@ "main": "dist/index.js",
   },
-  "dependencies": {
-    "shortid": "^2.2.16"
-  },
+  "dependencies": {},
   "directories": {
@@ -75,0 +73,0 @@ "test": "test"

README.md

@@ -17,4 +17,4 @@ <p align="center">
   </a>
-  <a href="https://bundlephobia.com/result?p=react-toast" target="_blank">
-  <img src="https://img.shields.io/bundlephobia/minzip/react-toast?color=%230B5DF5">
+  <a href="https://bundlephobia.com/result?p=react-toast@1.0.0" target="_blank">
+  <img src="https://img.shields.io/bundlephobia/minzip/react-toast/1.0.0?color=%23165be4">
   </a>
@@ -49,2 +49,6 @@ <a href="https://twitter.com/moharnadreza" target="_blank">
 
+### Demo
+
+Here's a little [demo](https://codesandbox.io/s/byqvk).
+
 ### Docs
@@ -97,8 +101,4 @@
 
-## Contribute 🍻
-
-Please check out [contributing guide](https://github.com/moharnadreza/react-toast/blob/develop/CONTRIBUTING.md) which will cover you up.
-
 ## License
 
 [MIT](https://github.com/moharnadreza/react-toast/blob/develop/LICENSE)

src/utils/toastDispatcher.ts

@@ -11,3 +11,2 @@ import { emitter } from './'
 export const toastDispatcher = ({ dispatch, delay }: IToastDispatcher) => {
-  /** Add a new toast to currenct toasts. */
   emitter.on(Events.SHOW, (toast: Toast) => {
@@ -22,7 +21,5 @@ dispatch({ type: 'ADD', toast })
 
-  /** Remove triggered toast from currenct toasts list. */
   emitter.on(Events.HIDE, (id: string) => dispatch({ type: 'REMOVE', id }))
 
-  /** Remove all toasts. */
   emitter.on(Events.HIDE_ALL, () => dispatch({ type: 'REMOVE_ALL' }))
 }

src/utils/toaster.ts

@@ -1,2 +0,1 @@
-import shortid from 'shortid'
 import { Type, ToastProvider, Toast } from 'types'
@@ -8,6 +7,7 @@
 
-// Generates a new toast object
 export const toaster = ({ content, type, config }: Toaster): Toast => {
   return {
-    id: shortid.generate(),
+    id: Math.random()
+      .toString(36)
+      .substr(2, 10),
     content,
@@ -14,0 +14,0 @@ type,

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Number of low supply chain risk alerts

4

decreased by-20%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

111729

decreased by-0.41%

Lines of code

1264

decreased by-0.71%

Dependency changes

• - Removedshortid@^2.2.16

• - Removednanoid@2.1.11(transitive)

• - Removedshortid@2.2.16(transitive)