goey-toast 0.2.2 → 0.3.0
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 +71 -71
- package/dist/index.cjs +105 -105
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +81 -81
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +30 -30
- package/dist/index.d.ts +30 -30
- package/dist/index.js +104 -104
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# gooey-toast
|
|
2
2
|
|
|
3
|
-
[](https://goey-toast.vercel.app)
|
|
4
4
|
|
|
5
5
|
**[Live Demo & Docs](https://goey-toast.vercel.app)**
|
|
6
6
|
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
- Hover pause: hovering an expanded toast pauses the dismiss timer
|
|
20
20
|
- Hover re-expand: hovering a collapsed pill re-expands the toast
|
|
21
21
|
- Pre-dismiss collapse animation
|
|
22
|
-
- In-place toast updates via `
|
|
23
|
-
- Dismiss by type filter: `
|
|
22
|
+
- In-place toast updates via `gooeyToast.update()`
|
|
23
|
+
- Dismiss by type filter: `gooeyToast.dismiss({ type: 'error' })`
|
|
24
24
|
- Dark mode and RTL layout support
|
|
25
25
|
- Animation presets: smooth, bouncy, subtle, snappy
|
|
26
26
|
- Timestamp display on expanded toasts
|
|
@@ -70,14 +70,14 @@ Add this import once in your app's entry point (e.g., `main.tsx` or `App.tsx`).
|
|
|
70
70
|
## Quick Start
|
|
71
71
|
|
|
72
72
|
```tsx
|
|
73
|
-
import {
|
|
73
|
+
import { GooeyToaster, gooeyToast } from 'goey-toast'
|
|
74
74
|
import 'goey-toast/styles.css'
|
|
75
75
|
|
|
76
76
|
function App() {
|
|
77
77
|
return (
|
|
78
78
|
<>
|
|
79
|
-
<
|
|
80
|
-
<button onClick={() =>
|
|
79
|
+
<GooeyToaster position="bottom-right" />
|
|
80
|
+
<button onClick={() => gooeyToast.success('Saved!')}>
|
|
81
81
|
Save
|
|
82
82
|
</button>
|
|
83
83
|
</>
|
|
@@ -87,30 +87,30 @@ function App() {
|
|
|
87
87
|
|
|
88
88
|
## API Reference
|
|
89
89
|
|
|
90
|
-
### `
|
|
90
|
+
### `gooeyToast` Methods
|
|
91
91
|
|
|
92
92
|
```ts
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
93
|
+
gooeyToast(title, options?) // default (neutral)
|
|
94
|
+
gooeyToast.success(title, options?) // green
|
|
95
|
+
gooeyToast.error(title, options?) // red
|
|
96
|
+
gooeyToast.warning(title, options?) // yellow
|
|
97
|
+
gooeyToast.info(title, options?) // blue
|
|
98
|
+
gooeyToast.promise(promise, data) // loading -> success/error
|
|
99
|
+
gooeyToast.update(id, options) // update an existing toast in-place
|
|
100
|
+
gooeyToast.dismiss(idOrFilter?) // dismiss one, by type, or all toasts
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
-
#### `
|
|
103
|
+
#### `gooeyToast.update(id, options)`
|
|
104
104
|
|
|
105
105
|
Updates an existing toast in-place without removing and re-creating it.
|
|
106
106
|
|
|
107
107
|
```tsx
|
|
108
|
-
const id =
|
|
108
|
+
const id = gooeyToast('Uploading...', {
|
|
109
109
|
icon: <SpinnerIcon />,
|
|
110
110
|
})
|
|
111
111
|
|
|
112
112
|
// Later, update the toast
|
|
113
|
-
|
|
113
|
+
gooeyToast.update(id, {
|
|
114
114
|
title: 'Upload complete',
|
|
115
115
|
type: 'success',
|
|
116
116
|
description: '3 files uploaded.',
|
|
@@ -118,50 +118,50 @@ goeyToast.update(id, {
|
|
|
118
118
|
})
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
**`
|
|
121
|
+
**`GooeyToastUpdateOptions`:**
|
|
122
122
|
|
|
123
123
|
| Option | Type | Description |
|
|
124
124
|
| ------------- | ----------------- | ----------------------------- |
|
|
125
125
|
| `title` | `string` | New title text |
|
|
126
126
|
| `description` | `ReactNode` | New body content |
|
|
127
|
-
| `type` | `
|
|
128
|
-
| `action` | `
|
|
127
|
+
| `type` | `GooeyToastType` | Change the toast type/color |
|
|
128
|
+
| `action` | `GooeyToastAction` | New action button |
|
|
129
129
|
| `icon` | `ReactNode \| null` | Custom icon (pass `null` to clear) |
|
|
130
130
|
|
|
131
|
-
#### `
|
|
131
|
+
#### `gooeyToast.dismiss(idOrFilter?)`
|
|
132
132
|
|
|
133
133
|
Dismiss a single toast by ID, all toasts of a given type, or all toasts at once.
|
|
134
134
|
|
|
135
135
|
```ts
|
|
136
136
|
// Dismiss a specific toast
|
|
137
|
-
|
|
137
|
+
gooeyToast.dismiss(toastId)
|
|
138
138
|
|
|
139
139
|
// Dismiss all error toasts
|
|
140
|
-
|
|
140
|
+
gooeyToast.dismiss({ type: 'error' })
|
|
141
141
|
|
|
142
142
|
// Dismiss multiple types
|
|
143
|
-
|
|
143
|
+
gooeyToast.dismiss({ type: ['error', 'warning'] })
|
|
144
144
|
|
|
145
145
|
// Dismiss all toasts
|
|
146
|
-
|
|
146
|
+
gooeyToast.dismiss()
|
|
147
147
|
```
|
|
148
148
|
|
|
149
|
-
### `
|
|
149
|
+
### `GooeyToastOptions`
|
|
150
150
|
|
|
151
|
-
Options passed as the second argument to `
|
|
151
|
+
Options passed as the second argument to `gooeyToast()` and type-specific methods.
|
|
152
152
|
|
|
153
153
|
| Option | Type | Description |
|
|
154
154
|
| ------------- | -------------------- | ---------------------------------- |
|
|
155
155
|
| `description` | `ReactNode` | Body content (string or component) |
|
|
156
|
-
| `action` | `
|
|
156
|
+
| `action` | `GooeyToastAction` | Action button configuration |
|
|
157
157
|
| `icon` | `ReactNode` | Custom icon override |
|
|
158
158
|
| `duration` | `number` | Display duration in ms |
|
|
159
159
|
| `id` | `string \| number` | Unique toast identifier |
|
|
160
|
-
| `classNames` | `
|
|
160
|
+
| `classNames` | `GooeyToastClassNames`| CSS class overrides |
|
|
161
161
|
| `fillColor` | `string` | Background color of the blob |
|
|
162
162
|
| `borderColor` | `string` | Border color of the blob |
|
|
163
163
|
| `borderWidth` | `number` | Border width in px (default 1.5) |
|
|
164
|
-
| `timing` | `
|
|
164
|
+
| `timing` | `GooeyToastTimings` | Animation timing overrides |
|
|
165
165
|
| `spring` | `boolean` | Enable spring/bounce animations (default `true`) |
|
|
166
166
|
| `bounce` | `number` | Spring intensity from `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
|
|
167
167
|
| `showProgress`| `boolean` | Show countdown progress bar |
|
|
@@ -169,7 +169,7 @@ Options passed as the second argument to `goeyToast()` and type-specific methods
|
|
|
169
169
|
| `onAutoClose` | `(id) => void` | Called only on timer-based auto-dismiss |
|
|
170
170
|
| `preset` | `AnimationPresetName`| Animation preset (`'smooth'`, `'bouncy'`, `'subtle'`, `'snappy'`) |
|
|
171
171
|
|
|
172
|
-
### `
|
|
172
|
+
### `GooeyToastAction`
|
|
173
173
|
|
|
174
174
|
| Property | Type | Required | Description |
|
|
175
175
|
| -------------- | ---------- | -------- | -------------------------------------------- |
|
|
@@ -177,7 +177,7 @@ Options passed as the second argument to `goeyToast()` and type-specific methods
|
|
|
177
177
|
| `onClick` | `() => void` | Yes | Click handler |
|
|
178
178
|
| `successLabel` | `string` | No | Label shown after click (morphs back to pill)|
|
|
179
179
|
|
|
180
|
-
### `
|
|
180
|
+
### `GooeyToastTimings`
|
|
181
181
|
|
|
182
182
|
Fine-tune animation speeds per toast.
|
|
183
183
|
|
|
@@ -185,7 +185,7 @@ Fine-tune animation speeds per toast.
|
|
|
185
185
|
| ------------------ | -------- | ------- | ------------------------------------ |
|
|
186
186
|
| `displayDuration` | `number` | 4000 | Milliseconds toast stays expanded |
|
|
187
187
|
|
|
188
|
-
### `
|
|
188
|
+
### `GooeyToastClassNames`
|
|
189
189
|
|
|
190
190
|
Override styles for any part of the toast.
|
|
191
191
|
|
|
@@ -200,9 +200,9 @@ Override styles for any part of the toast.
|
|
|
200
200
|
| `actionWrapper` | Button container |
|
|
201
201
|
| `actionButton` | Action button |
|
|
202
202
|
|
|
203
|
-
### `
|
|
203
|
+
### `GooeyToasterProps`
|
|
204
204
|
|
|
205
|
-
Props for the `<
|
|
205
|
+
Props for the `<GooeyToaster />` component.
|
|
206
206
|
|
|
207
207
|
| Prop | Type | Default | Description |
|
|
208
208
|
| ------------ | ------------------------------------- | ---------------- | --------------------------------------------- |
|
|
@@ -222,9 +222,9 @@ Props for the `<GoeyToaster />` component.
|
|
|
222
222
|
| `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Layout direction |
|
|
223
223
|
| `swipeToDismiss` | `boolean` | `true` | Enable swipe-to-dismiss on mobile |
|
|
224
224
|
|
|
225
|
-
### `
|
|
225
|
+
### `GooeyPromiseData<T>`
|
|
226
226
|
|
|
227
|
-
Configuration for `
|
|
227
|
+
Configuration for `gooeyToast.promise()`.
|
|
228
228
|
|
|
229
229
|
| Property | Type | Required | Description |
|
|
230
230
|
| ------------- | --------------------------------------------- | -------- | ---------------------------------------------- |
|
|
@@ -233,11 +233,11 @@ Configuration for `goeyToast.promise()`.
|
|
|
233
233
|
| `error` | `string \| ((error: unknown) => string)` | Yes | Title on error (static or derived from error) |
|
|
234
234
|
| `description` | `object` | No | Per-phase descriptions (see below) |
|
|
235
235
|
| `action` | `object` | No | Per-phase action buttons (see below) |
|
|
236
|
-
| `classNames` | `
|
|
236
|
+
| `classNames` | `GooeyToastClassNames` | No | CSS class overrides |
|
|
237
237
|
| `fillColor` | `string` | No | Background color of the blob |
|
|
238
238
|
| `borderColor` | `string` | No | Border color of the blob |
|
|
239
239
|
| `borderWidth` | `number` | No | Border width in px |
|
|
240
|
-
| `timing` | `
|
|
240
|
+
| `timing` | `GooeyToastTimings` | No | Animation timing overrides |
|
|
241
241
|
| `spring` | `boolean` | No | Enable spring/bounce animations (default `true`) |
|
|
242
242
|
| `bounce` | `number` | No | Spring intensity: `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
|
|
243
243
|
| `onDismiss` | `(id: string \| number) => void` | No | Called when toast is dismissed (any reason) |
|
|
@@ -255,15 +255,15 @@ Configuration for `goeyToast.promise()`.
|
|
|
255
255
|
|
|
256
256
|
| Key | Type |
|
|
257
257
|
| --------- | ----------------- |
|
|
258
|
-
| `success` | `
|
|
259
|
-
| `error` | `
|
|
258
|
+
| `success` | `GooeyToastAction` |
|
|
259
|
+
| `error` | `GooeyToastAction` |
|
|
260
260
|
|
|
261
261
|
## Usage Examples
|
|
262
262
|
|
|
263
263
|
### Description
|
|
264
264
|
|
|
265
265
|
```tsx
|
|
266
|
-
|
|
266
|
+
gooeyToast.error('Payment failed', {
|
|
267
267
|
description: 'Your card was declined. Please try again.',
|
|
268
268
|
})
|
|
269
269
|
```
|
|
@@ -271,7 +271,7 @@ goeyToast.error('Payment failed', {
|
|
|
271
271
|
### Custom React Component as Description
|
|
272
272
|
|
|
273
273
|
```tsx
|
|
274
|
-
|
|
274
|
+
gooeyToast.success('Deployment complete', {
|
|
275
275
|
description: (
|
|
276
276
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
277
277
|
<div>
|
|
@@ -288,7 +288,7 @@ goeyToast.success('Deployment complete', {
|
|
|
288
288
|
### Action Button with Success Label
|
|
289
289
|
|
|
290
290
|
```tsx
|
|
291
|
-
|
|
291
|
+
gooeyToast.info('Share link ready', {
|
|
292
292
|
description: 'Your link has been generated.',
|
|
293
293
|
action: {
|
|
294
294
|
label: 'Copy to Clipboard',
|
|
@@ -301,7 +301,7 @@ goeyToast.info('Share link ready', {
|
|
|
301
301
|
### Promise Toast
|
|
302
302
|
|
|
303
303
|
```tsx
|
|
304
|
-
|
|
304
|
+
gooeyToast.promise(saveData(), {
|
|
305
305
|
loading: 'Saving...',
|
|
306
306
|
success: 'Changes saved',
|
|
307
307
|
error: 'Something went wrong',
|
|
@@ -321,7 +321,7 @@ goeyToast.promise(saveData(), {
|
|
|
321
321
|
### Custom Styling
|
|
322
322
|
|
|
323
323
|
```tsx
|
|
324
|
-
|
|
324
|
+
gooeyToast.success('Styled!', {
|
|
325
325
|
fillColor: '#1a1a2e',
|
|
326
326
|
borderColor: '#333',
|
|
327
327
|
borderWidth: 2,
|
|
@@ -337,7 +337,7 @@ goeyToast.success('Styled!', {
|
|
|
337
337
|
### Display Duration
|
|
338
338
|
|
|
339
339
|
```tsx
|
|
340
|
-
|
|
340
|
+
gooeyToast.success('Saved', {
|
|
341
341
|
description: 'Your changes have been synced.',
|
|
342
342
|
timing: { displayDuration: 5000 },
|
|
343
343
|
})
|
|
@@ -349,13 +349,13 @@ Disable bounce/spring animations for a cleaner, more subtle look:
|
|
|
349
349
|
|
|
350
350
|
```tsx
|
|
351
351
|
// Per-toast: disable spring for this toast only
|
|
352
|
-
|
|
352
|
+
gooeyToast.success('Saved', {
|
|
353
353
|
description: 'Your changes have been synced.',
|
|
354
354
|
spring: false,
|
|
355
355
|
})
|
|
356
356
|
|
|
357
357
|
// Globally: disable spring for all toasts
|
|
358
|
-
<
|
|
358
|
+
<GooeyToaster spring={false} />
|
|
359
359
|
```
|
|
360
360
|
|
|
361
361
|
When `spring` is `false`, all spring-based animations (landing squish, blob squish, morph transitions, pill resize, header squish) use smooth ease-in-out curves instead. Error shake animations still work regardless of this setting.
|
|
@@ -366,16 +366,16 @@ Control how dramatic the spring effect feels with a single `bounce` value:
|
|
|
366
366
|
|
|
367
367
|
```tsx
|
|
368
368
|
// Subtle, barely-there spring
|
|
369
|
-
|
|
369
|
+
gooeyToast.success('Saved', { bounce: 0.1 })
|
|
370
370
|
|
|
371
371
|
// Default feel
|
|
372
|
-
|
|
372
|
+
gooeyToast.success('Saved', { bounce: 0.4 })
|
|
373
373
|
|
|
374
374
|
// Jelly mode
|
|
375
|
-
|
|
375
|
+
gooeyToast.success('Saved', { bounce: 0.8 })
|
|
376
376
|
|
|
377
|
-
// Set globally via
|
|
378
|
-
<
|
|
377
|
+
// Set globally via GooeyToaster
|
|
378
|
+
<GooeyToaster bounce={0.6} />
|
|
379
379
|
```
|
|
380
380
|
|
|
381
381
|
The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish magnitude together so you get a consistent feel from one number.
|
|
@@ -383,13 +383,13 @@ The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish
|
|
|
383
383
|
### Dark Mode
|
|
384
384
|
|
|
385
385
|
```tsx
|
|
386
|
-
<
|
|
386
|
+
<GooeyToaster theme="dark" />
|
|
387
387
|
```
|
|
388
388
|
|
|
389
389
|
### RTL Support
|
|
390
390
|
|
|
391
391
|
```tsx
|
|
392
|
-
<
|
|
392
|
+
<GooeyToaster dir="rtl" />
|
|
393
393
|
```
|
|
394
394
|
|
|
395
395
|
### Animation Presets
|
|
@@ -397,10 +397,10 @@ The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish
|
|
|
397
397
|
Four built-in presets: `smooth`, `bouncy`, `subtle`, `snappy`. Apply per-toast or globally:
|
|
398
398
|
|
|
399
399
|
```tsx
|
|
400
|
-
|
|
400
|
+
gooeyToast.success('Saved', { preset: 'bouncy' })
|
|
401
401
|
|
|
402
402
|
// Or globally
|
|
403
|
-
<
|
|
403
|
+
<GooeyToaster preset="smooth" />
|
|
404
404
|
```
|
|
405
405
|
|
|
406
406
|
### Progress Bar
|
|
@@ -408,10 +408,10 @@ goeyToast.success('Saved', { preset: 'bouncy' })
|
|
|
408
408
|
Show a countdown progress bar on toasts:
|
|
409
409
|
|
|
410
410
|
```tsx
|
|
411
|
-
|
|
411
|
+
gooeyToast.success('Saved', { showProgress: true })
|
|
412
412
|
|
|
413
413
|
// Or enable globally
|
|
414
|
-
<
|
|
414
|
+
<GooeyToaster showProgress />
|
|
415
415
|
```
|
|
416
416
|
|
|
417
417
|
### Keyboard Shortcuts
|
|
@@ -426,23 +426,23 @@ On mobile, swipe toasts to dismiss them. Enabled by default; disable with `swipe
|
|
|
426
426
|
|
|
427
427
|
```ts
|
|
428
428
|
// Components
|
|
429
|
-
export {
|
|
429
|
+
export { GooeyToaster } from 'goey-toast'
|
|
430
430
|
|
|
431
431
|
// Toast function
|
|
432
|
-
export {
|
|
432
|
+
export { gooeyToast } from 'goey-toast'
|
|
433
433
|
|
|
434
434
|
// Animation presets
|
|
435
435
|
export { animationPresets } from 'goey-toast'
|
|
436
436
|
|
|
437
437
|
// Types
|
|
438
438
|
export type {
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
439
|
+
GooeyToastOptions,
|
|
440
|
+
GooeyPromiseData,
|
|
441
|
+
GooeyToasterProps,
|
|
442
|
+
GooeyToastAction,
|
|
443
|
+
GooeyToastClassNames,
|
|
444
|
+
GooeyToastTimings,
|
|
445
|
+
GooeyToastUpdateOptions,
|
|
446
446
|
DismissFilter,
|
|
447
447
|
AnimationPreset,
|
|
448
448
|
AnimationPresetName,
|