diff --git a/README.md b/README.md
index 77cd8c3..41ae92e 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Make sure you are using Angular v17.3.0 or greater
## Quick start
-Install it:
+Install it with your favorite package manager:
```bash
npm i ngx-sonner
@@ -18,6 +18,8 @@ npm i ngx-sonner
yarn add ngx-sonner
# or
pnpm add ngx-sonner
+# or
+bun add ngx-sonner
```
Add `` to your app, it will be the place where all your toasts will be rendered. After that, you can use `toast()` from anywhere in your app.
@@ -39,9 +41,45 @@ export class AppComponent {
}
```
-## Types
-
-### Default
+## Table of contents
+
+- [toast()](#toast)
+ - [Creating toasts](#creating-toasts)
+ - [Default](#default)
+ - [Success](#success)
+ - [Info](#info)
+ - [Warning](#warning)
+ - [Error](#error)
+ - [Action](#action)
+ - [Cancel](#cancel)
+ - [Promise](#promise)
+ - [Loading](#loading)
+ - [Custom component](#custom-component)
+ - [Headless](#headless)
+ - [Dynamic position](#dynamic-position)
+ - [Other](#other)
+ - [Updating a toast](#updating-a-toast)
+ - [On Close Callback](#on-close-callback)
+ - [Dismissing toasts programmatically](#dismissing-toasts-programmatically)
+- [Toaster](#toaster)
+ - [Theme](#theme)
+ - [Position](#position)
+ - [Expand](#expand)
+ - [Close button](#close-button)
+ - [Rich colors](#rich-colors)
+ - [Custom offset](#custom-offset)
+ - [Duration](#duration)
+ - [Keyboard focus](#keyboard-focus)
+- [Styling](#styling)
+ - [TailwindCSS](#tailwind-css)
+
+## toast()
+
+Use it to render a toast. You can call it from anywhere, even outside of React.
+
+### Creating toasts
+
+#### Default
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
@@ -53,12 +91,12 @@ With custom icon and description:
```ts
toast('Event has been created', {
- description: 'Monday, January 3rd at 6:00pm',
- icon: IconComponent
+ description: 'Monday, January 3rd at 6:00pm',
+ icon: IconComponent
});
```
-### Success
+#### Success
Renders a checkmark icon in front of the message.
@@ -66,7 +104,7 @@ Renders a checkmark icon in front of the message.
toast.success('Event has been created');
```
-### Info
+#### Info
Renders a question mark icon in front of the message.
@@ -74,7 +112,7 @@ Renders a question mark icon in front of the message.
toast.info('Event has new information');
```
-### Warning
+#### Warning
Renders a warning icon in front of the message.
@@ -82,7 +120,7 @@ Renders a warning icon in front of the message.
toast.warning('Event has warning');
```
-### Error
+#### Error
Renders an error icon in front of the message.
@@ -90,28 +128,42 @@ Renders an error icon in front of the message.
toast.error('Event has not been created');
```
-### Action
+#### Action
-Renders a button.
+Renders a primary button, clicking it will close the toast and run the callback passed via `onClick`.
+You can prevent the toast from closing by calling `event.preventDefault()` in the onClick callback.
```ts
-toast('Event has been created', {
- action: {
- label: 'Undo',
- onClick: () => console.log('Undo')
- }
+toast('My action toast', {
+ action: {
+ label: 'Action',
+ onClick: () => console.log('Action!')
+ }
+});
+```
+
+#### Cancel
+
+Renders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.
+
+```ts
+toast('My cancel toast', {
+ cancel: {
+ label: 'Cancel',
+ onClick: () => console.log('Cancel!'),
+ },
});
```
-### Promise
+#### Promise
Starts in a loading state and will update automatically after the promise resolves or fails.
```ts
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
- loading: 'Loading',
- success: 'Success',
- error: 'Error'
+ loading: 'Loading',
+ success: 'Success',
+ error: 'Error'
});
```
@@ -119,39 +171,33 @@ You can pass a function to the success/error messages to incorporate the result/
```ts
toast.promise(promise, {
- loading: 'Loading...',
- success: (data) => {
- return `${data.name} has been added!`;
- },
- error: 'Error'
+ loading: 'Loading...',
+ success: (data) => {
+ return `${data.name} has been added!`;
+ },
+ error: 'Error'
});
```
-### Custom Component
+#### Loading
-You can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
+Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.
```ts
-toast(CustomComponent);
+toast.loading('Loading data');
```
-### Updating a toast
+#### Custom Component
-You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.
+You can pass a component as the first argument instead of a string to render custom component while maintaining default styling.
```ts
-const toastId = toast('Sonner');
-
-toast.success('Toast has been updated', {
- id: toastId
-});
+toast(CustomComponent);
```
-## Customization
-
-### Headless
+#### Headless
-You can use `toast.custom()` to render an unstyled toast with custom component while maintaining the functionality.
+You can use `toast.custom()` to render an unstyled toast with a custom component while maintaining the functionality.
```ts
@Component({
@@ -176,107 +222,88 @@ import { CustomComponent } from './custom.component';
toast.custom(CustomComponent);
```
-### Theme
+#### Dynamic position
-You can change the theme using the `theme` prop. Default theme is light.
+You can change the position of the toast dynamically by passing a position prop to the toast function. It will not affect the positioning of other toasts.
-```html
-
+```ts
+// Available positions:
+// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
+toast('Hello World', {
+ position: 'top-center',
+});
```
-### Position
+### Other
-You can change the position through the `position` prop on the `` component. Default is `bottom-right`.
+#### Updating a toast
-```html
-
-
+You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.
-
+```ts
+const toastId = toast('Sonner');
+
+toast.success('Toast has been updated', {
+ id: toastId
+});
```
-### Expanded
+#### On Close Callback
-Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.
+You can pass `onDismiss` and `onAutoClose` callbacks to each toast. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (duration prop).
-```html
-
+```ts
+toast('Event has been created', {
+ onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
+ onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),
+});
```
-### Styling
+#### Dismissing toasts programmatically
-Styling can be done globally via `toastOptions`, this way every toast will have the same styling.
+To remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function return the id of the toast.
-```html
-
+```ts
+const toastId = toast('Event has been created');
+
+toast.dismiss(toastId);
```
-You can also use the same props when calling `toast` to style a specific toast.
+You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
```ts
-toast('Event has been created', {
- style: 'background: red;',
- class: 'my-toast',
- descriptionClass: 'my-toast-description'
-});
+toast.dismiss();
```
-### Tailwind CSS
+## Toaster
-The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
+This component renders all the toasts, you can place it anywhere in your app.
+
+### Theme
+
+You can change the theme using the `theme` prop. Default theme is light.
```html
-
+
```
-You can do the same when calling `toast()`.
+### Position
-```ts
-toast('Hello World', {
- unstyled: true,
- classes: {
- toast: 'bg-blue-400',
- title: 'text-red-400 text-2xl',
- description: 'text-red-400',
- actionButton: 'bg-zinc-400',
- cancelButton: 'bg-orange-400',
- closeButton: 'bg-lime-400',
- },
-})
+You can change the position through the `position` prop on the `` component. Default is `bottom-right`.
+
+```html
+
+
+
+
```
-Styling per toast type is also possible.
+### Expand
+
+Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.
```html
-
+
```
### Close button
@@ -303,22 +330,6 @@ Offset from the edges of the screen.
```
-### Programmatically remove toast
-
-To remove a toast programmatically use `toast.dismiss(id)`.
-
-```ts
-const toastId = toast('Event has been created');
-
-toast.dismiss(toastId);
-```
-
-You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
-
-```ts
-toast.dismiss();
-```
-
### Duration
You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
@@ -338,25 +349,89 @@ toast('Event has been created', {
});
```
-### On Close Callback
+### Keyboard focus
+
+You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.
+
+```html
+
+```
+
+## Styling
-You can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).
+Styling can be done globally via `toastOptions`, this way every toast will have the same styling.
+
+```html
+
+```
+
+You can also use the same props when calling `toast` to style a specific toast.
```ts
toast('Event has been created', {
- onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
- onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`)
+ style: 'background: red;',
+ class: 'my-toast',
+ descriptionClass: 'my-toast-description'
});
```
-## Keyboard focus
+### Tailwind CSS
-You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.
+The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
```html
-
+
+```
+
+You can do the same when calling `toast()`.
+
+```ts
+toast('Hello World', {
+ unstyled: true,
+ classes: {
+ toast: 'bg-blue-400',
+ title: 'text-red-400 text-2xl',
+ description: 'text-red-400',
+ actionButton: 'bg-zinc-400',
+ cancelButton: 'bg-orange-400',
+ closeButton: 'bg-lime-400',
+ },
+})
+```
+
+Styling per toast type is also possible.
+
+```html
+
```
## License
-MIT
+[MIT](https://github.com/tutkli/ngx-sonner/blob/master/LICENSE)
diff --git a/libs/ngx-sonner/README.md b/libs/ngx-sonner/README.md
index 390589f..3679ed7 100644
--- a/libs/ngx-sonner/README.md
+++ b/libs/ngx-sonner/README.md
@@ -10,7 +10,7 @@ Make sure you are using Angular v17.3.0 or greater
## Quick start
-Install it:
+Install it with your favorite package manager:
```bash
npm i ngx-sonner
@@ -18,6 +18,8 @@ npm i ngx-sonner
yarn add ngx-sonner
# or
pnpm add ngx-sonner
+# or
+bun add ngx-sonner
```
Add `` to your app, it will be the place where all your toasts will be rendered. After that, you can use `toast()` from anywhere in your app.
@@ -39,9 +41,45 @@ export class AppComponent {
}
```
-## Types
-
-### Default
+## Table of contents
+
+- [toast()](#toast)
+ - [Creating toasts](#creating-toasts)
+ - [Default](#default)
+ - [Success](#success)
+ - [Info](#info)
+ - [Warning](#warning)
+ - [Error](#error)
+ - [Action](#action)
+ - [Cancel](#cancel)
+ - [Promise](#promise)
+ - [Loading](#loading)
+ - [Custom component](#custom-component)
+ - [Headless](#headless)
+ - [Dynamic position](#dynamic-position)
+ - [Other](#other)
+ - [Updating a toast](#updating-a-toast)
+ - [On Close Callback](#on-close-callback)
+ - [Dismissing toasts programmatically](#dismissing-toasts-programmatically)
+- [Toaster](#toaster)
+ - [Theme](#theme)
+ - [Position](#position)
+ - [Expand](#expand)
+ - [Close button](#close-button)
+ - [Rich colors](#rich-colors)
+ - [Custom offset](#custom-offset)
+ - [Duration](#duration)
+ - [Keyboard focus](#keyboard-focus)
+- [Styling](#styling)
+ - [TailwindCSS](#tailwind-css)
+
+## toast()
+
+Use it to render a toast. You can call it from anywhere, even outside of React.
+
+### Creating toasts
+
+#### Default
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
@@ -58,7 +96,7 @@ toast('Event has been created', {
});
```
-### Success
+#### Success
Renders a checkmark icon in front of the message.
@@ -66,7 +104,7 @@ Renders a checkmark icon in front of the message.
toast.success('Event has been created');
```
-### Info
+#### Info
Renders a question mark icon in front of the message.
@@ -74,7 +112,7 @@ Renders a question mark icon in front of the message.
toast.info('Event has new information');
```
-### Warning
+#### Warning
Renders a warning icon in front of the message.
@@ -82,7 +120,7 @@ Renders a warning icon in front of the message.
toast.warning('Event has warning');
```
-### Error
+#### Error
Renders an error icon in front of the message.
@@ -90,20 +128,34 @@ Renders an error icon in front of the message.
toast.error('Event has not been created');
```
-### Action
+#### Action
-Renders a button.
+Renders a primary button, clicking it will close the toast and run the callback passed via `onClick`.
+You can prevent the toast from closing by calling `event.preventDefault()` in the onClick callback.
```ts
-toast('Event has been created', {
+toast('My action toast', {
action: {
- label: 'Undo',
- onClick: () => console.log('Undo')
+ label: 'Action',
+ onClick: () => console.log('Action!')
}
});
```
-### Promise
+#### Cancel
+
+Renders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.
+
+```ts
+toast('My cancel toast', {
+ cancel: {
+ label: 'Cancel',
+ onClick: () => console.log('Cancel!'),
+ },
+});
+```
+
+#### Promise
Starts in a loading state and will update automatically after the promise resolves or fails.
@@ -127,31 +179,25 @@ toast.promise(promise, {
});
```
-### Custom Component
+#### Loading
-You can pass a component as the first argument instead of a string to render custom component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
+Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.
```ts
-toast(CustomComponent);
+toast.loading('Loading data');
```
-### Updating a toast
+#### Custom Component
-You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.
+You can pass a component as the first argument instead of a string to render custom component while maintaining default styling.
```ts
-const toastId = toast('Sonner');
-
-toast.success('Toast has been updated', {
- id: toastId
-});
+toast(CustomComponent);
```
-## Customization
+#### Headless
-### Headless
-
-You can use `toast.custom()` to render an unstyled toast with custom component while maintaining the functionality.
+You can use `toast.custom()` to render an unstyled toast with a custom component while maintaining the functionality.
```ts
@Component({
@@ -176,6 +222,63 @@ import { CustomComponent } from './custom.component';
toast.custom(CustomComponent);
```
+#### Dynamic position
+
+You can change the position of the toast dynamically by passing a position prop to the toast function. It will not affect the positioning of other toasts.
+
+```ts
+// Available positions:
+// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
+toast('Hello World', {
+ position: 'top-center',
+});
+```
+
+### Other
+
+#### Updating a toast
+
+You can update a toast by using the `toast` function and passing it the id of the toast you want to update, the rest stays the same.
+
+```ts
+const toastId = toast('Sonner');
+
+toast.success('Toast has been updated', {
+ id: toastId
+});
+```
+
+#### On Close Callback
+
+You can pass `onDismiss` and `onAutoClose` callbacks to each toast. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (duration prop).
+
+```ts
+toast('Event has been created', {
+ onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
+ onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),
+});
+```
+
+#### Dismissing toasts programmatically
+
+To remove a toast programmatically use `toast.dismiss(id)`. The `toast()` function return the id of the toast.
+
+```ts
+const toastId = toast('Event has been created');
+
+toast.dismiss(toastId);
+```
+
+You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
+
+```ts
+toast.dismiss();
+```
+
+## Toaster
+
+This component renders all the toasts, you can place it anywhere in your app.
+
### Theme
You can change the theme using the `theme` prop. Default theme is light.
@@ -195,7 +298,7 @@ You can change the position through the `position` prop on the `
```
-### Expanded
+### Expand
Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.
@@ -203,16 +306,66 @@ Toasts can also be expanded by default through the `expand` prop. You can also c
```
-### Styling
+### Close button
+
+Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
+
+```html
+
+```
+
+### Rich colors
+
+You can make error and success state more colorful by adding the `richColors` prop.
+
+```html
+
+```
+
+### Custom offset
+
+Offset from the edges of the screen.
+
+```html
+
+```
+
+### Duration
+
+You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
+
+```html
+
+```
+
+```ts
+toast('Event has been created', {
+ duration: 10000
+});
+
+// Persisent toast
+toast('Event has been created', {
+ duration: Number.POSITIVE_INFINITY
+});
+```
+
+### Keyboard focus
+
+You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.
+
+```html
+
+```
+
+## Styling
Styling can be done globally via `toastOptions`, this way every toast will have the same styling.
```html
```
@@ -279,84 +432,6 @@ Styling per toast type is also possible.
/>
```
-### Close button
-
-Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
-
-```html
-
-```
-
-### Rich colors
-
-You can make error and success state more colorful by adding the `richColors` prop.
-
-```html
-
-```
-
-### Custom offset
-
-Offset from the edges of the screen.
-
-```html
-
-```
-
-### Programmatically remove toast
-
-To remove a toast programmatically use `toast.dismiss(id)`.
-
-```ts
-const toastId = toast('Event has been created');
-
-toast.dismiss(toastId);
-```
-
-You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
-
-```ts
-toast.dismiss();
-```
-
-### Duration
-
-You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
-
-```html
-
-```
-
-```ts
-toast('Event has been created', {
- duration: 10000
-});
-
-// Persisent toast
-toast('Event has been created', {
- duration: Number.POSITIVE_INFINITY
-});
-```
-
-### On Close Callback
-
-You can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).
-
-```ts
-toast('Event has been created', {
- onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
- onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`)
-});
-```
-
-## Keyboard focus
-
-You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of `event.code` values for each key.
-
-```html
-
-```
-
## License
-MIT
+[MIT](https://github.com/tutkli/ngx-sonner/blob/master/LICENSE)
diff --git a/libs/ngx-sonner/src/lib/internal/constants.ts b/libs/ngx-sonner/src/lib/internal/constants.ts
new file mode 100644
index 0000000..87fd897
--- /dev/null
+++ b/libs/ngx-sonner/src/lib/internal/constants.ts
@@ -0,0 +1,39 @@
+import { ToastClassnames } from '../types';
+
+// Visible toasts amount
+export const VISIBLE_TOASTS_AMOUNT = 3;
+
+// Viewport padding
+export const VIEWPORT_OFFSET = '32px';
+
+// Default lifetime of a toasts (in ms)
+export const TOAST_LIFETIME = 4000;
+
+// Default toast width
+export const TOAST_WIDTH = 356;
+
+// Default gap between toasts
+export const GAP = 14;
+
+// Threshold to dismiss a toast
+export const SWIPE_THRESHOLD = 20;
+
+// Equal to exit animation duration
+export const TIME_BEFORE_UNMOUNT = 200;
+
+export const defaultClasses: ToastClassnames = {
+ toast: '',
+ title: '',
+ description: '',
+ loader: '',
+ closeButton: '',
+ cancelButton: '',
+ actionButton: '',
+ action: '',
+ warning: '',
+ error: '',
+ success: '',
+ default: '',
+ info: '',
+ loading: '',
+};
diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
index 3bbb736..ad6a0df 100644
--- a/libs/ngx-sonner/src/lib/toast.component.ts
+++ b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -13,37 +13,17 @@ import {
viewChild,
} from '@angular/core';
import { cn } from './internal/cn';
+import {
+ defaultClasses,
+ GAP,
+ SWIPE_THRESHOLD,
+ TIME_BEFORE_UNMOUNT,
+ TOAST_LIFETIME,
+} from './internal/constants';
import { AsComponentPipe } from './pipes/as-component.pipe';
import { IsStringPipe } from './pipes/is-string.pipe';
import { toastState } from './state';
-import { ToastClassnames, ToastProps } from './types';
-
-// Default lifetime of a toasts (in ms)
-const TOAST_LIFETIME = 4000;
-
-// Default gap between toasts
-const GAP = 14;
-
-const SWIPE_THRESHOLD = 20;
-
-const TIME_BEFORE_UNMOUNT = 200;
-
-const defaultClasses: ToastClassnames = {
- toast: '',
- title: '',
- description: '',
- loader: '',
- closeButton: '',
- cancelButton: '',
- actionButton: '',
- action: '',
- warning: '',
- error: '',
- success: '',
- default: '',
- info: '',
- loading: '',
-};
+import { ToastProps } from './types';
@Component({
selector: 'ngx-sonner-toast',
diff --git a/libs/ngx-sonner/src/lib/toaster.component.ts b/libs/ngx-sonner/src/lib/toaster.component.ts
index 1fb2a56..781f757 100644
--- a/libs/ngx-sonner/src/lib/toaster.component.ts
+++ b/libs/ngx-sonner/src/lib/toaster.component.ts
@@ -17,27 +17,19 @@ import {
ViewEncapsulation,
} from '@angular/core';
import { IconComponent } from './icon.component';
+import {
+ GAP,
+ TOAST_LIFETIME,
+ TOAST_WIDTH,
+ VIEWPORT_OFFSET,
+ VISIBLE_TOASTS_AMOUNT,
+} from './internal/constants';
import { LoaderComponent } from './loader.component';
import { ToastFilterPipe } from './pipes/toast-filter.pipe';
import { toastState } from './state';
import { ToastComponent } from './toast.component';
import { Position, Theme, ToasterProps } from './types';
-// Default lifetime of a toasts (in ms)
-const TOAST_LIFETIME = 4000;
-
-// Visible toasts amount
-const VISIBLE_TOASTS_AMOUNT = 3;
-
-// Viewport padding
-const VIEWPORT_OFFSET = '32px';
-
-// Default toast width
-const TOAST_WIDTH = 356;
-
-// Default gap between toasts
-const GAP = 14;
-
@Component({
selector: 'ngx-sonner-toaster',
standalone: true,
diff --git a/libs/ngx-sonner/src/lib/types.ts b/libs/ngx-sonner/src/lib/types.ts
index e6b0af9..598f02a 100644
--- a/libs/ngx-sonner/src/lib/types.ts
+++ b/libs/ngx-sonner/src/lib/types.ts
@@ -28,37 +28,97 @@ export type PromiseData = ExternalToast & {
};
export type ToastT = {
+ /**
+ * Custom id for the toast.
+ *
+ * @default autogenerated
+ */
id: number | string;
title?: string | Type;
type?: ToastTypes;
+ /**
+ * Icon displayed in front of toast's text, aligned vertically.
+ */
icon?: Type;
component?: Type;
componentProps?: Record;
+ /**
+ * Dark toast in light mode and vice versa.
+ *
+ * @default false
+ */
invert?: boolean;
+ /**
+ * Adds a close button.
+ *
+ * @default false
+ */
closeButton?: boolean;
+ /**
+ * If `false`, it'll prevent the user from dismissing the toast by swiping.
+ *
+ * @default true
+ */
dismissible?: boolean;
+ /**
+ * Toast's description, renders underneath the title.
+ */
description?: string | Type;
+ /**
+ * Time in milliseconds that should elapse before automatically closing the toast.
+ *
+ * @default 4000
+ */
duration?: number;
delete?: boolean;
+ /**
+ * Control the sensitivity of the toast for screen readers.
+ *
+ * @default false
+ */
important?: boolean;
+ /**
+ * Renders a primary button, clicking it will close the toast.
+ */
action?: {
label: string;
onClick: (event: MouseEvent) => void;
};
+ /**
+ * Renders a secondary button, clicking it will close the toast.
+ */
cancel?: {
label: string;
onClick?: () => void;
};
+ /**
+ * The function gets called when either the close button is clicked, or the toast is swiped.
+ *
+ * @param toast
+ */
onDismiss?: (toast: ToastT) => void;
+ /**
+ * Function that gets called when the toast disappears automatically after it's timeout (duration` prop).
+ *
+ * @param toast
+ */
onAutoClose?: (toast: ToastT) => void;
promise?: PromiseT;
cancelButtonStyle?: string;
actionButtonStyle?: string;
style?: Record;
+ /**
+ * Removes the default styling, which allows for easier customization.
+ */
unstyled?: boolean;
class?: string;
classes?: ToastClassnames;
descriptionClass?: string;
+ /**
+ * Position of the toast.
+ *
+ * @default 'bottom-right'
+ */
position?: Position;
/**
* @internal This is used to determine if the toast has been updated to determine when to reset timer.
@@ -79,12 +139,6 @@ export type HeightT = {
toastId: number | string;
};
-export enum SwipeStateTypes {
- SwipedOut = 'SwipedOut',
- SwipedBack = 'SwipedBack',
- NotSwiped = 'NotSwiped',
-}
-
export type Theme = 'light' | 'dark' | 'system';
export type ToastToDismiss = {
@@ -105,7 +159,7 @@ export type ToasterProps = {
invert: boolean;
/**
- * Toast's theme, either light, dark, or system
+ * Toast's theme, either `light`, `dark`, or `system`
*
* @default 'light'
*/