react-toast-msg 0.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.es.css +2 -0
- package/dist/index.es.css.map +1 -0
- package/dist/index.es.js +147 -0
- package/dist/index.es.js.map +1 -0
- package/dist/index.js +151 -0
- package/dist/index.js.map +1 -0
- package/package.json +45 -11
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# 🚀 react-toast-msg
|
|
2
|
+
|
|
3
|
+
A lightweight, zero-config, customizable React toast notification library — just plug and play.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- ⚡ Extremely fast and minimal
|
|
8
|
+
- 📦 Tree-shakable and zero external CSS
|
|
9
|
+
- 🧩 Works with both `import` and `require`
|
|
10
|
+
- 🎨 Easy to style with utility classes
|
|
11
|
+
- ✅ Works with React 18+
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 📦 Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react-toast-msg
|
|
19
|
+
# or
|
|
20
|
+
yarn add react-toast-msg
|
|
21
|
+
````
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 🔧 Usage
|
|
26
|
+
|
|
27
|
+
### 1. Add the `ToastContainer` at the root of your app (once):
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { ToastContainer, toast } from 'react-toast-msg';
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
return (
|
|
34
|
+
<>
|
|
35
|
+
<ToastContainer />
|
|
36
|
+
<button onClick={() => toast('This is a toast!')}>Show Toast</button>
|
|
37
|
+
</>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 🪄 Variants
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
toast('Default toast');
|
|
48
|
+
toast.success('Success message!');
|
|
49
|
+
toast.error('Something went wrong!');
|
|
50
|
+
toast.info('Some useful info');
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 🎨 Customization (Coming Soon)
|
|
56
|
+
|
|
57
|
+
Style your toasts with Tailwind, classNames, or inline styles. Theme support and placement config coming in the next release.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## 🔌 API
|
|
62
|
+
|
|
63
|
+
| Function | Description |
|
|
64
|
+
| -------------------- | ------------------ |
|
|
65
|
+
| `toast(msg)` | Show a basic toast |
|
|
66
|
+
| `toast.success(msg)` | Success variant |
|
|
67
|
+
| `toast.error(msg)` | Error variant |
|
|
68
|
+
| `toast.info(msg)` | Info variant |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 📚 License
|
|
73
|
+
|
|
74
|
+
MIT © [Sudhanshu Kumar](https://github.com/sudhucodes)
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 🌐 Links
|
|
79
|
+
|
|
80
|
+
* 📁 [GitHub Repo](https://github.com/sudhucodes/react-toast-msg)
|
|
81
|
+
* 🐞 [Issue Tracker](https://github.com/sudhucodes/react-toast-msg/issues)
|
|
82
|
+
* 📦 [npm Package](https://www.npmjs.com/package/react-toast-msg)
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{animation:fadeInOut 3s ease-in-out forwards;background-color:#fff;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.15);color:#000;max-width:400px;min-width:200px;opacity:0;padding:10px 20px}.toast.success{background-color:#d4edda}.toast.error{background-color:#f8d7da}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["global.css"],"names":[],"mappings":"AAEA,iBAMI,YAAa,CACb,qBAAsB,CACtB,OAAQ,CALR,QAAS,CAOT,cAAe,CATf,cAAe,CACf,QAAS,CAET,0BAA2B,CAK3B,UAAW,CAJX,YAMJ,CAEA,OASI,2CAA4C,CAL5C,qBAAsB,CAFtB,iBAAkB,CAGlB,oCAAyC,CAFzC,UAAW,CAIX,eAAgB,CADhB,eAAgB,CAEhB,SAAU,CAPV,iBASJ,CAEA,eACI,wBACJ,CAEA,aACI,wBACJ,CAEA,qBACI,GACI,SAAU,CACV,2BACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,GACI,SAAU,CACV,2BACJ,CACJ","file":"index.css","sourcesContent":["/* ToastContainer.css */\r\n\r\n.toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.toast-container{display:flex;flex-direction:column;gap:8px;left:50%;max-width:90vw;position:fixed;top:20px;transform:translateX(-50%);width:auto;z-index:9999}.toast{animation:fadeInOut 3s ease-in-out forwards;background-color:#fff;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.15);color:#000;max-width:400px;min-width:200px;opacity:0;padding:10px 20px}.toast.success{background-color:#d4edda}.toast.error{background-color:#f8d7da}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
|
|
2
|
+
/*# sourceMappingURL=index.es.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["global.css"],"names":[],"mappings":"AAEA,iBAMI,YAAa,CACb,qBAAsB,CACtB,OAAQ,CALR,QAAS,CAOT,cAAe,CATf,cAAe,CACf,QAAS,CAET,0BAA2B,CAK3B,UAAW,CAJX,YAMJ,CAEA,OASI,2CAA4C,CAL5C,qBAAsB,CAFtB,iBAAkB,CAGlB,oCAAyC,CAFzC,UAAW,CAIX,eAAgB,CADhB,eAAgB,CAEhB,SAAU,CAPV,iBASJ,CAEA,eACI,wBACJ,CAEA,aACI,wBACJ,CAEA,qBACI,GACI,SAAU,CACV,2BACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,IACI,SAAU,CACV,uBACJ,CAEA,GACI,SAAU,CACV,2BACJ,CACJ","file":"index.es.css","sourcesContent":["/* ToastContainer.css */\r\n\r\n.toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}"]}
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function _arrayLikeToArray(r, a) {
|
|
4
|
+
(null == a || a > r.length) && (a = r.length);
|
|
5
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
6
|
+
return n;
|
|
7
|
+
}
|
|
8
|
+
function _arrayWithHoles(r) {
|
|
9
|
+
if (Array.isArray(r)) return r;
|
|
10
|
+
}
|
|
11
|
+
function _arrayWithoutHoles(r) {
|
|
12
|
+
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
13
|
+
}
|
|
14
|
+
function _iterableToArray(r) {
|
|
15
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
16
|
+
}
|
|
17
|
+
function _iterableToArrayLimit(r, l) {
|
|
18
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
19
|
+
if (null != t) {
|
|
20
|
+
var e,
|
|
21
|
+
n,
|
|
22
|
+
i,
|
|
23
|
+
u,
|
|
24
|
+
a = [],
|
|
25
|
+
f = !0,
|
|
26
|
+
o = !1;
|
|
27
|
+
try {
|
|
28
|
+
if (i = (t = t.call(r)).next, 0 === l) {
|
|
29
|
+
if (Object(t) !== t) return;
|
|
30
|
+
f = !1;
|
|
31
|
+
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
32
|
+
} catch (r) {
|
|
33
|
+
o = !0, n = r;
|
|
34
|
+
} finally {
|
|
35
|
+
try {
|
|
36
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
37
|
+
} finally {
|
|
38
|
+
if (o) throw n;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return a;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
function _nonIterableRest() {
|
|
45
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
46
|
+
}
|
|
47
|
+
function _nonIterableSpread() {
|
|
48
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
|
+
}
|
|
50
|
+
function _slicedToArray(r, e) {
|
|
51
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
52
|
+
}
|
|
53
|
+
function _toConsumableArray(r) {
|
|
54
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
55
|
+
}
|
|
56
|
+
function _unsupportedIterableToArray(r, a) {
|
|
57
|
+
if (r) {
|
|
58
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
59
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
60
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function styleInject(css, ref) {
|
|
65
|
+
if ( ref === void 0 ) ref = {};
|
|
66
|
+
var insertAt = ref.insertAt;
|
|
67
|
+
|
|
68
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
69
|
+
|
|
70
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
71
|
+
var style = document.createElement('style');
|
|
72
|
+
style.type = 'text/css';
|
|
73
|
+
|
|
74
|
+
if (insertAt === 'top') {
|
|
75
|
+
if (head.firstChild) {
|
|
76
|
+
head.insertBefore(style, head.firstChild);
|
|
77
|
+
} else {
|
|
78
|
+
head.appendChild(style);
|
|
79
|
+
}
|
|
80
|
+
} else {
|
|
81
|
+
head.appendChild(style);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
if (style.styleSheet) {
|
|
85
|
+
style.styleSheet.cssText = css;
|
|
86
|
+
} else {
|
|
87
|
+
style.appendChild(document.createTextNode(css));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
var css_248z = ".toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}";
|
|
92
|
+
styleInject(css_248z);
|
|
93
|
+
|
|
94
|
+
function ToastContainer() {
|
|
95
|
+
var _useState = useState([]),
|
|
96
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
97
|
+
toasts = _useState2[0],
|
|
98
|
+
setToasts = _useState2[1];
|
|
99
|
+
useEffect(function () {
|
|
100
|
+
_register(function (toast) {
|
|
101
|
+
setToasts(function (prev) {
|
|
102
|
+
return [].concat(_toConsumableArray(prev), [toast]);
|
|
103
|
+
});
|
|
104
|
+
setTimeout(function () {
|
|
105
|
+
setToasts(function (prev) {
|
|
106
|
+
return prev.slice(1);
|
|
107
|
+
});
|
|
108
|
+
}, 3000);
|
|
109
|
+
});
|
|
110
|
+
}, []);
|
|
111
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
className: "toast-container"
|
|
113
|
+
}, toasts.map(function (t, i) {
|
|
114
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
115
|
+
key: i,
|
|
116
|
+
className: "toast ".concat(t.type)
|
|
117
|
+
}, t.message);
|
|
118
|
+
}));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
var addToast;
|
|
122
|
+
var toast = {
|
|
123
|
+
show: function show(message) {
|
|
124
|
+
addToast && addToast({
|
|
125
|
+
message: message,
|
|
126
|
+
type: 'default'
|
|
127
|
+
});
|
|
128
|
+
},
|
|
129
|
+
success: function success(message) {
|
|
130
|
+
addToast && addToast({
|
|
131
|
+
message: message,
|
|
132
|
+
type: 'success'
|
|
133
|
+
});
|
|
134
|
+
},
|
|
135
|
+
error: function error(message) {
|
|
136
|
+
addToast && addToast({
|
|
137
|
+
message: message,
|
|
138
|
+
type: 'error'
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
function _register(fn) {
|
|
143
|
+
addToast = fn;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export { ToastContainer, _register, toast };
|
|
147
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ToastContainer.jsx","../src/index.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useEffect, useState } from 'react';\r\nimport { _register } from './index.js';\r\nimport './global.css';\r\n\r\nexport default function ToastContainer() {\r\n const [toasts, setToasts] = useState([]);\r\n\r\n useEffect(() => {\r\n _register((toast) => {\r\n setToasts((prev) => [...prev, toast]);\r\n setTimeout(() => {\r\n setToasts((prev) => prev.slice(1));\r\n }, 3000);\r\n });\r\n }, []);\r\n\r\n return (\r\n <div className=\"toast-container\">\r\n {toasts.map((t, i) => (\r\n <div\r\n key={i}\r\n className={`toast ${t.type}`}\r\n >\r\n {t.message}\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n}","import ToastContainer from './ToastContainer.jsx';\r\n\r\nlet addToast;\r\n\r\nconst toast = {\r\n show(message) {\r\n addToast && addToast({ message, type: 'default' });\r\n },\r\n success(message) {\r\n addToast && addToast({ message, type: 'success' });\r\n },\r\n error(message) {\r\n addToast && addToast({ message, type: 'error' });\r\n },\r\n};\r\n\r\nfunction _register(fn) {\r\n addToast = fn;\r\n}\r\n\r\nexport { ToastContainer, toast, _register };"],"names":["ToastContainer","_useState","useState","_useState2","_slicedToArray","toasts","setToasts","useEffect","_register","toast","prev","concat","_toConsumableArray","setTimeout","slice","React","createElement","className","map","t","i","key","type","message","addToast","show","success","error","fn"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function _arrayLikeToArray(r, a) {
|
|
6
|
+
(null == a || a > r.length) && (a = r.length);
|
|
7
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
8
|
+
return n;
|
|
9
|
+
}
|
|
10
|
+
function _arrayWithHoles(r) {
|
|
11
|
+
if (Array.isArray(r)) return r;
|
|
12
|
+
}
|
|
13
|
+
function _arrayWithoutHoles(r) {
|
|
14
|
+
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
15
|
+
}
|
|
16
|
+
function _iterableToArray(r) {
|
|
17
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
18
|
+
}
|
|
19
|
+
function _iterableToArrayLimit(r, l) {
|
|
20
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
21
|
+
if (null != t) {
|
|
22
|
+
var e,
|
|
23
|
+
n,
|
|
24
|
+
i,
|
|
25
|
+
u,
|
|
26
|
+
a = [],
|
|
27
|
+
f = !0,
|
|
28
|
+
o = !1;
|
|
29
|
+
try {
|
|
30
|
+
if (i = (t = t.call(r)).next, 0 === l) {
|
|
31
|
+
if (Object(t) !== t) return;
|
|
32
|
+
f = !1;
|
|
33
|
+
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
34
|
+
} catch (r) {
|
|
35
|
+
o = !0, n = r;
|
|
36
|
+
} finally {
|
|
37
|
+
try {
|
|
38
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
39
|
+
} finally {
|
|
40
|
+
if (o) throw n;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return a;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function _nonIterableRest() {
|
|
47
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
48
|
+
}
|
|
49
|
+
function _nonIterableSpread() {
|
|
50
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
51
|
+
}
|
|
52
|
+
function _slicedToArray(r, e) {
|
|
53
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
54
|
+
}
|
|
55
|
+
function _toConsumableArray(r) {
|
|
56
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
57
|
+
}
|
|
58
|
+
function _unsupportedIterableToArray(r, a) {
|
|
59
|
+
if (r) {
|
|
60
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
61
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
62
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function styleInject(css, ref) {
|
|
67
|
+
if ( ref === void 0 ) ref = {};
|
|
68
|
+
var insertAt = ref.insertAt;
|
|
69
|
+
|
|
70
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
71
|
+
|
|
72
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
73
|
+
var style = document.createElement('style');
|
|
74
|
+
style.type = 'text/css';
|
|
75
|
+
|
|
76
|
+
if (insertAt === 'top') {
|
|
77
|
+
if (head.firstChild) {
|
|
78
|
+
head.insertBefore(style, head.firstChild);
|
|
79
|
+
} else {
|
|
80
|
+
head.appendChild(style);
|
|
81
|
+
}
|
|
82
|
+
} else {
|
|
83
|
+
head.appendChild(style);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (style.styleSheet) {
|
|
87
|
+
style.styleSheet.cssText = css;
|
|
88
|
+
} else {
|
|
89
|
+
style.appendChild(document.createTextNode(css));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
var css_248z = ".toast-container {\r\n position: fixed;\r\n top: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: auto;\r\n max-width: 90vw;\r\n}\r\n\r\n.toast {\r\n padding: 10px 20px;\r\n border-radius: 4px;\r\n color: #000;\r\n background-color: #fff;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n min-width: 200px;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: fadeInOut 3s ease-in-out forwards;\r\n}\r\n\r\n.toast.success {\r\n background-color: #d4edda;\r\n}\r\n\r\n.toast.error {\r\n background-color: #f8d7da;\r\n}\r\n\r\n@keyframes fadeInOut {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n\r\n 10% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 90% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-10px);\r\n }\r\n}";
|
|
94
|
+
styleInject(css_248z);
|
|
95
|
+
|
|
96
|
+
function ToastContainer() {
|
|
97
|
+
var _useState = React.useState([]),
|
|
98
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
99
|
+
toasts = _useState2[0],
|
|
100
|
+
setToasts = _useState2[1];
|
|
101
|
+
React.useEffect(function () {
|
|
102
|
+
_register(function (toast) {
|
|
103
|
+
setToasts(function (prev) {
|
|
104
|
+
return [].concat(_toConsumableArray(prev), [toast]);
|
|
105
|
+
});
|
|
106
|
+
setTimeout(function () {
|
|
107
|
+
setToasts(function (prev) {
|
|
108
|
+
return prev.slice(1);
|
|
109
|
+
});
|
|
110
|
+
}, 3000);
|
|
111
|
+
});
|
|
112
|
+
}, []);
|
|
113
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: "toast-container"
|
|
115
|
+
}, toasts.map(function (t, i) {
|
|
116
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
117
|
+
key: i,
|
|
118
|
+
className: "toast ".concat(t.type)
|
|
119
|
+
}, t.message);
|
|
120
|
+
}));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
var addToast;
|
|
124
|
+
var toast = {
|
|
125
|
+
show: function show(message) {
|
|
126
|
+
addToast && addToast({
|
|
127
|
+
message: message,
|
|
128
|
+
type: 'default'
|
|
129
|
+
});
|
|
130
|
+
},
|
|
131
|
+
success: function success(message) {
|
|
132
|
+
addToast && addToast({
|
|
133
|
+
message: message,
|
|
134
|
+
type: 'success'
|
|
135
|
+
});
|
|
136
|
+
},
|
|
137
|
+
error: function error(message) {
|
|
138
|
+
addToast && addToast({
|
|
139
|
+
message: message,
|
|
140
|
+
type: 'error'
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
function _register(fn) {
|
|
145
|
+
addToast = fn;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
exports.ToastContainer = ToastContainer;
|
|
149
|
+
exports._register = _register;
|
|
150
|
+
exports.toast = toast;
|
|
151
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ToastContainer.jsx","../src/index.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useEffect, useState } from 'react';\r\nimport { _register } from './index.js';\r\nimport './global.css';\r\n\r\nexport default function ToastContainer() {\r\n const [toasts, setToasts] = useState([]);\r\n\r\n useEffect(() => {\r\n _register((toast) => {\r\n setToasts((prev) => [...prev, toast]);\r\n setTimeout(() => {\r\n setToasts((prev) => prev.slice(1));\r\n }, 3000);\r\n });\r\n }, []);\r\n\r\n return (\r\n <div className=\"toast-container\">\r\n {toasts.map((t, i) => (\r\n <div\r\n key={i}\r\n className={`toast ${t.type}`}\r\n >\r\n {t.message}\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n}","import ToastContainer from './ToastContainer.jsx';\r\n\r\nlet addToast;\r\n\r\nconst toast = {\r\n show(message) {\r\n addToast && addToast({ message, type: 'default' });\r\n },\r\n success(message) {\r\n addToast && addToast({ message, type: 'success' });\r\n },\r\n error(message) {\r\n addToast && addToast({ message, type: 'error' });\r\n },\r\n};\r\n\r\nfunction _register(fn) {\r\n addToast = fn;\r\n}\r\n\r\nexport { ToastContainer, toast, _register };"],"names":["ToastContainer","_useState","useState","_useState2","_slicedToArray","toasts","setToasts","useEffect","_register","toast","prev","concat","_toConsumableArray","setTimeout","slice","React","createElement","className","map","t","i","key","type","message","addToast","show","success","error","fn"],"mappings":"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","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,12 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
2
|
+
"name": "react-toast-msg",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "A lightweight, customizable React toast notification library with zero-config and fast setup.",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.es.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "rollup -c"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"toast",
|
|
16
|
+
"notification",
|
|
17
|
+
"react-toast",
|
|
18
|
+
"react-toastify",
|
|
19
|
+
"snackbar",
|
|
20
|
+
"react-toast-msg",
|
|
21
|
+
"toast-component"
|
|
22
|
+
],
|
|
23
|
+
"author": "SudhuCodes",
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "https://github.com/sudhucodes/react-toast-msg.git"
|
|
28
|
+
},
|
|
29
|
+
"bugs": {
|
|
30
|
+
"url": "https://github.com/sudhucodes/react-toast-msg/issues"
|
|
31
|
+
},
|
|
32
|
+
"homepage": "https://github.com/sudhucodes/react-toast-msg#readme",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": "^18.0.0",
|
|
35
|
+
"react-dom": "^18.0.0"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@babel/core": "^7.27.3",
|
|
39
|
+
"@babel/preset-env": "^7.27.2",
|
|
40
|
+
"@babel/preset-react": "^7.27.1",
|
|
41
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
42
|
+
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
43
|
+
"rollup": "^3.22.0",
|
|
44
|
+
"rollup-plugin-postcss": "^4.0.2"
|
|
45
|
+
}
|
|
46
|
+
}
|