d9-toast 1.3.22 → 1.3.24
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/toast.css +18 -10
- 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/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;
|
|
@@ -105,6 +105,7 @@
|
|
|
105
105
|
backdrop-filter: blur(10px);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
|
|
108
109
|
/* Theme colors */
|
|
109
110
|
.light {
|
|
110
111
|
--primary-bg: #ffffff;
|
|
@@ -231,7 +232,7 @@
|
|
|
231
232
|
padding: 8px 12px;
|
|
232
233
|
font-size: 14px;
|
|
233
234
|
border-radius: 6px;
|
|
234
|
-
box-shadow:
|
|
235
|
+
box-shadow: 0px 0px 1px #0b0b0b89;
|
|
235
236
|
flex-shrink: 0;
|
|
236
237
|
cursor: pointer;
|
|
237
238
|
}
|
|
@@ -269,8 +270,7 @@
|
|
|
269
270
|
/* Action button 2 */
|
|
270
271
|
.action-btnB__success {
|
|
271
272
|
color: var(--success-color);
|
|
272
|
-
|
|
273
|
-
background-color: transparent;
|
|
273
|
+
background-color: var(--success-bg);
|
|
274
274
|
}
|
|
275
275
|
.action-btnB__error {
|
|
276
276
|
color: var(--error-color);
|
|
@@ -278,19 +278,16 @@
|
|
|
278
278
|
}
|
|
279
279
|
.action-btnB__info {
|
|
280
280
|
color: var(--info-color);
|
|
281
|
-
|
|
282
|
-
background-color: transparent;
|
|
281
|
+
background-color: var(--info-bg);
|
|
283
282
|
}
|
|
284
283
|
.action-btnB__warning {
|
|
285
284
|
color: var(--warning-color);
|
|
286
|
-
|
|
287
|
-
background-color: transparent;
|
|
285
|
+
background-color: var(--warning-bg);
|
|
288
286
|
}
|
|
289
287
|
.action-btnB__loading,
|
|
290
288
|
.action-btnB__submit {
|
|
291
289
|
color: var(--loading-color);
|
|
292
|
-
|
|
293
|
-
background-color: transparent;
|
|
290
|
+
background-color: var(--loading-bg);
|
|
294
291
|
}
|
|
295
292
|
|
|
296
293
|
.progress-container {
|
|
@@ -393,3 +390,14 @@
|
|
|
393
390
|
transform: scale(0.6);
|
|
394
391
|
}
|
|
395
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
|
+
}
|