d9-toast 1.3.21 → 1.3.23
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 +49 -49
- package/dist/ToastContext.js +1 -0
- package/dist/d9-toast.d.ts +1 -1
- package/dist/toast.css +20 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,19 +7,18 @@
|
|
|
7
7
|
|
|
8
8
|
[](https://rzp.io/rzp/eVnJ0oP)
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
A lightweight, customizable toast notification library for React applications.
|
|
12
11
|
|
|
13
12
|
## ✨ Features
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
- **Lightweight & Customizable** – Minimal bundle size with extensive customization options
|
|
15
|
+
- **React Native** – Built specifically for React with hooks support
|
|
16
|
+
- **No External Dependencies** – Pure CSS included, works out of the box
|
|
17
|
+
- **Multiple Toast Types** – Success, error, info, warning, loading, and submit states
|
|
18
|
+
- **Responsive Design** – Modern UI with smooth animations across all devices
|
|
19
|
+
- **Tailwind CSS Compatible** – Optional custom styling via `className` prop
|
|
20
|
+
- **Flexible Positioning** – 7 different display positions
|
|
21
|
+
- **Theme Support** – Light, dark, and colored themes
|
|
23
22
|
|
|
24
23
|
## 📺 Demo
|
|
25
24
|
|
|
@@ -85,30 +84,29 @@ function MyComponent() {
|
|
|
85
84
|
|
|
86
85
|
Returns an object with toast management methods:
|
|
87
86
|
|
|
88
|
-
| Method
|
|
89
|
-
|
|
87
|
+
| Method | Description |
|
|
88
|
+
| -------------------- | --------------------------------- |
|
|
90
89
|
| `showToast(options)` | Displays a new toast notification |
|
|
91
|
-
| `removeToast(id)`
|
|
92
|
-
| `removeToastAll()`
|
|
93
|
-
|
|
90
|
+
| `removeToast(id)` | Removes a specific toast by ID |
|
|
91
|
+
| `removeToastAll()` | Removes all active toasts |
|
|
94
92
|
|
|
95
93
|
### Toast Options
|
|
96
94
|
|
|
97
|
-
| Option
|
|
98
|
-
|
|
99
|
-
| `message`
|
|
100
|
-
| `type`
|
|
101
|
-
| `position`
|
|
102
|
-
| `theme`
|
|
103
|
-
| `duration`
|
|
104
|
-
| `autoClose`
|
|
105
|
-
| `closable`
|
|
106
|
-
| `pauseOnHover`
|
|
107
|
-
| `pauseOnFocusLoss` | boolean
|
|
108
|
-
| `progress`
|
|
109
|
-
| `title`
|
|
110
|
-
| `actions`
|
|
111
|
-
| `className`
|
|
95
|
+
| Option | Type | Default | Description |
|
|
96
|
+
| ------------------ | ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------- |
|
|
97
|
+
| `message` | string \| React.ReactNode | **Required** | Toast content (supports JSX) |
|
|
98
|
+
| `type` | string | `"success"` | Toast type: `success`, `error`, `info`, `warning`, `loading`, `submit` |
|
|
99
|
+
| `position` | string | `"top-right"` | Position: `top-left`, `top-right`, `bottom-left`, `bottom-right`, `center`, `center-top`, `center-bottom` |
|
|
100
|
+
| `theme` | string | `"light"` | Theme: `light`, `dark`, `colored` |
|
|
101
|
+
| `duration` | number | `5000` | Auto-close duration in ms (0 = infinite) |
|
|
102
|
+
| `autoClose` | boolean | `true` | Whether toast auto-closes after duration |
|
|
103
|
+
| `closable` | boolean | `false` | Show close (X) button |
|
|
104
|
+
| `pauseOnHover` | boolean | `true` | Pause timer on hover |
|
|
105
|
+
| `pauseOnFocusLoss` | boolean | `true` | Pause timer when window loses focus |
|
|
106
|
+
| `progress` | boolean | `true` | Show progress bar |
|
|
107
|
+
| `title` | boolean | `true` | Show toast header with type |
|
|
108
|
+
| `actions` | Array | `[]` | Action buttons: `[{ text: string, className: string, callback: function }]` |
|
|
109
|
+
| `className` | string | `""` | Additional CSS/Tailwind classes[Use !important with Tailwind] |
|
|
112
110
|
|
|
113
111
|
## 💡 Advanced Usage
|
|
114
112
|
|
|
@@ -122,7 +120,7 @@ showToast({
|
|
|
122
120
|
<p>With formatted HTML/JSX</p>
|
|
123
121
|
</div>
|
|
124
122
|
),
|
|
125
|
-
type: "info"
|
|
123
|
+
type: "info",
|
|
126
124
|
});
|
|
127
125
|
```
|
|
128
126
|
|
|
@@ -133,17 +131,17 @@ showToast({
|
|
|
133
131
|
message: "File uploaded successfully",
|
|
134
132
|
type: "success",
|
|
135
133
|
actions: [
|
|
136
|
-
{
|
|
137
|
-
text: "View",
|
|
138
|
-
className: "",
|
|
139
|
-
callback: () => console.log("View clicked")
|
|
134
|
+
{
|
|
135
|
+
text: "View",
|
|
136
|
+
className: "!bg-gray-600 !text-white",
|
|
137
|
+
callback: () => console.log("View clicked"),
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
text: "Dismiss",
|
|
141
|
+
className: "!bg-gray-600/20 !text-white",
|
|
142
|
+
callback: ({ id }) => removeToast(id),
|
|
140
143
|
},
|
|
141
|
-
|
|
142
|
-
className: "",
|
|
143
|
-
text: "Dismiss",
|
|
144
|
-
callback: ({ id }) => removeToast(id)
|
|
145
|
-
}
|
|
146
|
-
]
|
|
144
|
+
],
|
|
147
145
|
});
|
|
148
146
|
```
|
|
149
147
|
|
|
@@ -156,7 +154,7 @@ const { showToast, removeToast, removeToastAll } = useToast();
|
|
|
156
154
|
const toastId = showToast({
|
|
157
155
|
message: "Processing...",
|
|
158
156
|
type: "loading",
|
|
159
|
-
duration: 0 // Infinite
|
|
157
|
+
duration: 0, // Infinite
|
|
160
158
|
});
|
|
161
159
|
|
|
162
160
|
// Remove it later
|
|
@@ -177,10 +175,12 @@ import "d9-toast/dist/toast.css";
|
|
|
177
175
|
### Custom Styling
|
|
178
176
|
|
|
179
177
|
```jsx
|
|
178
|
+
// optional Tailwind/custom styling [Use !important with Tailwind (className: "!bg-red-500")]
|
|
180
179
|
showToast({
|
|
181
180
|
message: "Custom styled toast",
|
|
182
|
-
className:
|
|
183
|
-
|
|
181
|
+
className:
|
|
182
|
+
"bg-gradient-to-r from-gray-800 to-gray-600 !text-white !shadow-xl !rounded-lg",
|
|
183
|
+
type: "success",
|
|
184
184
|
});
|
|
185
185
|
```
|
|
186
186
|
|
|
@@ -194,10 +194,10 @@ showToast({ message: "Light", theme: "light" });
|
|
|
194
194
|
showToast({ message: "Dark", theme: "dark" });
|
|
195
195
|
|
|
196
196
|
// Colored theme (uses type for color)
|
|
197
|
-
showToast({
|
|
198
|
-
message: "Colored",
|
|
199
|
-
theme: "colored",
|
|
200
|
-
type: "success"
|
|
197
|
+
showToast({
|
|
198
|
+
message: "Colored",
|
|
199
|
+
theme: "colored",
|
|
200
|
+
type: "success",
|
|
201
201
|
});
|
|
202
202
|
```
|
|
203
203
|
|
|
@@ -210,6 +210,7 @@ npm run build
|
|
|
210
210
|
```
|
|
211
211
|
|
|
212
212
|
Outputs to `dist/` directory:
|
|
213
|
+
|
|
213
214
|
- `dist/index.js` – JavaScript bundle
|
|
214
215
|
- `dist/toast.css` – Default styles
|
|
215
216
|
|
|
@@ -241,8 +242,6 @@ MIT © [Athul / D9 Coder]
|
|
|
241
242
|
|
|
242
243
|
## ❤️ Support My Work
|
|
243
244
|
|
|
244
|
-
|
|
245
|
-
|
|
246
245
|
Donate here → https://rzp.io/rzp/eVnJ0oP
|
|
247
246
|
|
|
248
247
|
[](https://rzp.io/rzp/eVnJ0oP)
|
|
@@ -250,6 +249,7 @@ Donate here → https://rzp.io/rzp/eVnJ0oP
|
|
|
250
249
|
---
|
|
251
250
|
|
|
252
251
|
**Quick Links:**
|
|
252
|
+
|
|
253
253
|
- [Report an Issue](https://github.com/psathul073/d9-toast/issues)
|
|
254
254
|
- [View Source](https://github.com/psathul073/d9-toast)
|
|
255
255
|
- [npm Package](https://www.npmjs.com/package/d9-toast)
|
package/dist/ToastContext.js
CHANGED
package/dist/d9-toast.d.ts
CHANGED
|
@@ -77,7 +77,7 @@ declare module "d9-toast" {
|
|
|
77
77
|
/** Context value shape */
|
|
78
78
|
export interface ToastContextValue {
|
|
79
79
|
/** Show a toast with given options */
|
|
80
|
-
showToast: (toast: ToastOptions) =>
|
|
80
|
+
showToast: (toast: ToastOptions) => number;
|
|
81
81
|
/** Remove a toast by ID */
|
|
82
82
|
removeToast: (id: number) => void;
|
|
83
83
|
/** Remove all active toasts */
|
package/dist/toast.css
CHANGED
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
|
|
88
88
|
.toast {
|
|
89
89
|
position: relative;
|
|
90
|
-
min-width:
|
|
90
|
+
min-width: 250px;
|
|
91
91
|
max-width: 425px;
|
|
92
92
|
display: flex;
|
|
93
93
|
flex-direction: column;
|
|
@@ -97,13 +97,15 @@
|
|
|
97
97
|
border-radius: 8px;
|
|
98
98
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
99
99
|
font-size: smaller;
|
|
100
|
-
font-family:
|
|
100
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
101
101
|
transition: all 0.3s ease-in;
|
|
102
102
|
will-change: transform, opacity;
|
|
103
103
|
background-color: var(--primary-bg);
|
|
104
104
|
color: var(--primary-color);
|
|
105
|
+
backdrop-filter: blur(10px);
|
|
105
106
|
}
|
|
106
107
|
|
|
108
|
+
|
|
107
109
|
/* Theme colors */
|
|
108
110
|
.light {
|
|
109
111
|
--primary-bg: #ffffff;
|
|
@@ -230,7 +232,7 @@
|
|
|
230
232
|
padding: 8px 12px;
|
|
231
233
|
font-size: 14px;
|
|
232
234
|
border-radius: 6px;
|
|
233
|
-
box-shadow:
|
|
235
|
+
box-shadow: 0px 0px 1px #0b0b0b89;
|
|
234
236
|
flex-shrink: 0;
|
|
235
237
|
cursor: pointer;
|
|
236
238
|
}
|
|
@@ -268,8 +270,7 @@
|
|
|
268
270
|
/* Action button 2 */
|
|
269
271
|
.action-btnB__success {
|
|
270
272
|
color: var(--success-color);
|
|
271
|
-
|
|
272
|
-
background-color: transparent;
|
|
273
|
+
background-color: var(--success-bg);
|
|
273
274
|
}
|
|
274
275
|
.action-btnB__error {
|
|
275
276
|
color: var(--error-color);
|
|
@@ -277,19 +278,16 @@
|
|
|
277
278
|
}
|
|
278
279
|
.action-btnB__info {
|
|
279
280
|
color: var(--info-color);
|
|
280
|
-
|
|
281
|
-
background-color: transparent;
|
|
281
|
+
background-color: var(--info-bg);
|
|
282
282
|
}
|
|
283
283
|
.action-btnB__warning {
|
|
284
284
|
color: var(--warning-color);
|
|
285
|
-
|
|
286
|
-
background-color: transparent;
|
|
285
|
+
background-color: var(--warning-bg);
|
|
287
286
|
}
|
|
288
287
|
.action-btnB__loading,
|
|
289
288
|
.action-btnB__submit {
|
|
290
289
|
color: var(--loading-color);
|
|
291
|
-
|
|
292
|
-
background-color: transparent;
|
|
290
|
+
background-color: var(--loading-bg);
|
|
293
291
|
}
|
|
294
292
|
|
|
295
293
|
.progress-container {
|
|
@@ -392,3 +390,14 @@
|
|
|
392
390
|
transform: scale(0.6);
|
|
393
391
|
}
|
|
394
392
|
}
|
|
393
|
+
|
|
394
|
+
@media screen and (max-width: 375px) {
|
|
395
|
+
.toastContainer.top-right,
|
|
396
|
+
.toastContainer.bottom-right {
|
|
397
|
+
right: 0px;
|
|
398
|
+
}
|
|
399
|
+
.toastContainer.top-left,
|
|
400
|
+
.toastContainer.bottom-left {
|
|
401
|
+
left: 0px;
|
|
402
|
+
}
|
|
403
|
+
}
|