vibe-toast 0.1.2 → 0.1.5
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 +103 -0
- package/package.json +1 -3
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# vibe-toast 🎯
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/vibe-toast)
|
|
4
|
+
[](https://www.npmjs.com/package/vibe-toast)
|
|
5
|
+
[](https://bundlephobia.com/package/vibe-toast)
|
|
6
|
+
[](https://github.com/suraj-savle/vibe-toast/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
A lightweight, zero-dependency toast notification library for React. Beautiful, customizable, and easy to use.
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install vibe-toast
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## ✨ Features
|
|
15
|
+
|
|
16
|
+
- 🚀 **Lightweight** – Only 1.4kb gzipped, zero dependencies
|
|
17
|
+
- 🎨 **Customizable** – Themes, positions, icons, and actions
|
|
18
|
+
- 📱 **Responsive** – Works on all screen sizes
|
|
19
|
+
- ⌨️ **Accessible** – ARIA labels and keyboard navigation
|
|
20
|
+
- 🔧 **TypeScript Ready** – Full type definitions included
|
|
21
|
+
- 🔄 **Promise Support** – Built-in promise toast handling
|
|
22
|
+
|
|
23
|
+
## 🚀 Quick Start
|
|
24
|
+
|
|
25
|
+
```jsx
|
|
26
|
+
import { Toaster, toast } from 'vibe-toast'
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<>
|
|
31
|
+
<Toaster position="top-right" />
|
|
32
|
+
<button onClick={() => toast.success('Hello!')}>
|
|
33
|
+
Show Toast
|
|
34
|
+
</button>
|
|
35
|
+
</>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 📚 Examples
|
|
41
|
+
|
|
42
|
+
### Basic Toasts
|
|
43
|
+
```jsx
|
|
44
|
+
toast.success('Operation completed!')
|
|
45
|
+
toast.error('Something went wrong')
|
|
46
|
+
toast.warning('Your session expires soon')
|
|
47
|
+
toast.info('New update available')
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### With Title & Description
|
|
51
|
+
```jsx
|
|
52
|
+
toast({
|
|
53
|
+
title: 'Welcome back!',
|
|
54
|
+
description: 'You have 3 new messages',
|
|
55
|
+
variant: 'success',
|
|
56
|
+
})
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### With Actions
|
|
60
|
+
```jsx
|
|
61
|
+
toast.warning('File deleted', {
|
|
62
|
+
actions: [
|
|
63
|
+
{
|
|
64
|
+
label: 'Undo',
|
|
65
|
+
onClick: () => toast.success('Restored!')
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
})
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Promise Toast
|
|
72
|
+
```jsx
|
|
73
|
+
const save = async () => {
|
|
74
|
+
await new Promise(resolve => setTimeout(resolve, 2000))
|
|
75
|
+
return { id: 123 }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
toast.promise(save(), {
|
|
79
|
+
loading: 'Saving...',
|
|
80
|
+
success: 'Saved!',
|
|
81
|
+
error: 'Failed',
|
|
82
|
+
})
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
### Toast Methods
|
|
87
|
+
- `toast.success(message, options?)`
|
|
88
|
+
- `toast.error(message, options?)`
|
|
89
|
+
- `toast.warning(message, options?)`
|
|
90
|
+
- `toast.info(message, options?)`
|
|
91
|
+
- `toast(message, options?)`
|
|
92
|
+
- `toast.promise(promise, messages)`
|
|
93
|
+
- `toast.loading(message)`
|
|
94
|
+
- `toast.dismiss(id)`
|
|
95
|
+
- `toast.dismissAll()`
|
|
96
|
+
- `toast.update(id, options)`
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
<div align="center">
|
|
100
|
+
<a href="https://github.com/suraj-savle/vibe-toast">GitHub</a> •
|
|
101
|
+
<a href="https://github.com/suraj-savle/vibe-toast/issues">Issues</a> •
|
|
102
|
+
<a href="https://github.com/suraj-savle/vibe-toast#readme">Documentation</a>
|
|
103
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vibe-toast",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "Animation-first, minimal toast library for React.",
|
|
5
5
|
"author": "Suraj Savle",
|
|
6
6
|
"license": "MIT",
|
|
@@ -54,8 +54,6 @@
|
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@types/react": "^19.0.0",
|
|
56
56
|
"@types/react-dom": "^19.0.0",
|
|
57
|
-
"react": "^19.2.4",
|
|
58
|
-
"react-dom": "^19.2.4",
|
|
59
57
|
"tsup": "^8.5.1",
|
|
60
58
|
"typescript": "^5.9.3"
|
|
61
59
|
},
|