From a2e23419baa8995ffde29cebcb0d71904c6b64b4 Mon Sep 17 00:00:00 2001 From: Clara Castillo Date: Tue, 16 Apr 2024 14:17:58 +0200 Subject: [PATCH 1/3] docs: add doc comments on types --- libs/ngx-sonner/src/lib/internal/constants.ts | 39 +++++++++++ libs/ngx-sonner/src/lib/toast.component.ts | 36 +++------- libs/ngx-sonner/src/lib/toaster.component.ts | 22 ++---- libs/ngx-sonner/src/lib/types.ts | 68 +++++++++++++++++-- 4 files changed, 115 insertions(+), 50 deletions(-) create mode 100644 libs/ngx-sonner/src/lib/internal/constants.ts 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' */ From 0bbe3af56339821927e2e78d7e38dd0c6adc73be Mon Sep 17 00:00:00 2001 From: Clara Castillo Date: Tue, 16 Apr 2024 14:58:29 +0200 Subject: [PATCH 2/3] docs: update README.md --- README.md | 341 +++++++++++++++++++++++--------------- libs/ngx-sonner/README.md | 297 ++++++++++++++++++++------------- 2 files changed, 394 insertions(+), 244 deletions(-) diff --git a/README.md b/README.md index 77cd8c3..c1c5d6a 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,37 +171,31 @@ 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. @@ -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..c1c5d6a 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,29 +179,23 @@ 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. @@ -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) From dbb89481c79b9aabe2ff79443f7618ffb7a36d7a Mon Sep 17 00:00:00 2001 From: Clara Castillo Date: Tue, 16 Apr 2024 14:59:50 +0200 Subject: [PATCH 3/3] docs: fix typo in README.md --- README.md | 2 +- libs/ngx-sonner/README.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c1c5d6a..41ae92e 100644 --- a/README.md +++ b/README.md @@ -197,7 +197,7 @@ toast(CustomComponent); #### 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({ diff --git a/libs/ngx-sonner/README.md b/libs/ngx-sonner/README.md index c1c5d6a..3679ed7 100644 --- a/libs/ngx-sonner/README.md +++ b/libs/ngx-sonner/README.md @@ -197,7 +197,7 @@ toast(CustomComponent); #### 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({ @@ -340,12 +340,12 @@ You can change the duration of each toast by using the `duration` property, or c ```ts toast('Event has been created', { - duration: 10000 + duration: 10000 }); // Persisent toast toast('Event has been created', { - duration: Number.POSITIVE_INFINITY + duration: Number.POSITIVE_INFINITY }); ```