Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngxpert/hot-toast
🍞 Smoking hot toast notifications for Angular.
https://github.com/ngxpert/hot-toast
angular angular-library css javascript ngneat-hot-toast ngneat-hottoast ngxpert ngxpert-hot-toast ngxpert-hottoast scss toast typescript webdevelopment
Last synced: 3 months ago
JSON representation
🍞 Smoking hot toast notifications for Angular.
- Host: GitHub
- URL: https://github.com/ngxpert/hot-toast
- Owner: ngxpert
- License: mit
- Created: 2024-02-19T05:41:19.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-06T10:14:46.000Z (5 months ago)
- Last Synced: 2024-07-19T10:15:41.540Z (4 months ago)
- Topics: angular, angular-library, css, javascript, ngneat-hot-toast, ngneat-hottoast, ngxpert, ngxpert-hot-toast, ngxpert-hottoast, scss, toast, typescript, webdevelopment
- Language: TypeScript
- Homepage: https://ngxpert.github.io/hot-toast/
- Size: 13.2 MB
- Stars: 57
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - hot-toast - Smoking hot toast notifications for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - hot-toast - Smoking hot toast notifications for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - hot-toast - Smoking hot toast notifications for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - hot-toast - Smoking hot toast notifications for Angular. (Table of contents / Third Party Components)
README
[](https://www.npmjs.com/package/@ngxpert/hot-toast)
[](https://github.com/ngxpert/hot-toast/blob/main/LICENSE)
[]()
[](https://github.com/ngxpert/hot-toast/compare)
[](https://github.com/prettier/prettier)
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngxpert/)
[](https://www.cypress.io/)
[](https://github.com/semantic-release/semantic-release)
> Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from [react-hot-toast](https://github.com/timolins/react-hot-toast)
https://github.com/ngxpert/hot-toast/assets/6831283/ae718568-d5ea-47bf-a41d-6aabc7d4a044
## Compatibility with Angular Versions
@ngxpert/hot-toast
Angular
1.x, 2.x
>= 17 < 18
3.x
>= 18
### For older Angular versions, keep using [@ngneat/hot-toast from npm](https://www.npmjs.com/package/@ngneat/hot-toast).
## Features
- 🔥 **Hot by default**
- ☕ **Easy to use**
- 🐍 **Snackbar variation**
- ♿ **Accessible**
- 🖐️ **Reduce motion support**
- 😊 **Emoji Support**
- 🛠 **Customizable**
- ⏳ **Observable API**
- ✋ **Pause on hover**
- 🔁 **Events**
- 🔒 **Persistent**
## Installation
With **npm**:
```bash
npm install @ngneat/[email protected] @ngxpert/hot-toast
```
or **yarn**
```bash
yarn add @ngneat/[email protected] @ngxpert/hot-toast
```
For older versions
You can install it through **Angular CLI**:
```bash
ng add @ngneat/hot-toast
```
or with **npm**:
```bash
# For Angular version >= 9.1.13 < 13
npm install @ngneat/[email protected] @ngneat/hot-toast@3
# For Angular version >= 13 < 15
npm install @ngneat/[email protected] @ngneat/hot-toast@4
# For Angular version >= 15 <16
npm install @ngneat/[email protected] @ngneat/hot-toast@5
# For Angular version >= 16 <17
npm install @ngneat/[email protected] @ngneat/hot-toast@6
```
## Setup
### Styles
If you use **SCSS** add this line to your main **styles.scss**:
```scss
@use 'node_modules/@ngxpert/hot-toast/src/styles/styles.scss';
```
or if you use **CSS** add this to your styles inside your **angular.json**:
```json
"styles": [
"node_modules/@ngxpert/hot-toast/src/styles/styles.css",
],
```
### Standalone Setup
```typescript
import { AppComponent } from './src/app.component';
import { provideHotToastConfig } from '@ngxpert/hot-toast';
bootstrapApplication(AppComponent, {
providers: [
provideHotToastConfig(), // @ngxpert/hot-toast providers
]
});
```
### Module Setup
Add `provideHotToastConfig()` to your app.module.ts `providers` section. Toast options ([`Partial`](#toastconfig)) here.:
```typescript
import { providerHotToastConfig } from '@ngxpert/hot-toast';
@NgModule({
providers: [provideHotToastConfig()],
})
class AppModule {}
```
### Stylings
if you use **SCSS** add this line to your main **styles.scss**:
```scss
@use '@ngxpert/hot-toast/src/styles/styles.scss';
```
or if you use **CSS** add this to your styles inside your **angular.json**:
```json
"styles": [
"node_modules/@ngxpert/hot-toast/src/styles/styles.css",
],
```
## Basic Usage
```typescript
import { HotToastService } from '@ngxpert/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService) {}
showToast() {
this.toast.show('Hello World!');
this.toast.loading('Lazyyy...');
this.toast.success('Yeah!!');
this.toast.warning('Boo!');
this.toast.error('Oh no!');
this.toast.info('Something...');
}
update() {
saveSettings
.pipe(
this.toast.observe({
loading: 'Saving...',
success: 'Settings saved!',
error: 'Could not save.',
})
)
.subscribe();
}
}
```
You can pass [`ToastOptions`](#toastoptions) while creating the toast to customize the look and behavior:
```typescript
import { HotToastService } from '@ngxpert/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService) {}
customToast() {
this.toast.success('Look at my styles, and I also need more time!', {
duration: 5000,
style: {
border: '1px solid #713200',
padding: '16px',
color: '#713200',
},
iconTheme: {
primary: '#713200',
secondary: '#FFFAEE',
},
});
}
}
```
You can also set global [`ToastConfig`](#toastconfig) options while importing:
```typescript
import { provideHotToastConfig } from '@ngxpert/hot-toast';
@NgModule({
providers: [
provideHotToastConfig({
reverseOrder: true,
dismissible: true,
autoClose: false,
}),
],
})
class AppModule {}
```
Additionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:
```typescript
// app.config.ts
import { provideHotToastConfig } from '@ngxpert/hot-toast';
export const appConfig: ApplicationConfig = {
providers: [provideHotToastConfig({ ... })],
};
```
## Examples
You can checkout examples at: .
### ToastConfig
All options, which are set _Available in global config?_ from `ToastOptions` are supported. Below are extra configurable options:
| Name | Type | Description |
| ------------- | --------------------- | ----------------------------------------------------------------------- |
| reverseOrder | `boolean` | Sets the reverse order for hot-toast stacking
_Default: false_ |
| visibleToasts | `number` | Sets the number of toasts visible. 0 will set no limit.
_Default: 5_ |
| stacking | `"vertical"\|"depth"` | Sets Sets the type of stacking
_Default: "vertical"_ |
### ToastOptions
Configuration used when opening an hot-toast.
| Name | Type | Description | Available in global config? |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| id | `string` | Unique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
_[Example](https://ngxpert.github.io/hot-toast/#only-one-at-a-time)_ | No |
| duration | `number` | Duration in milliseconds after which hot-toast will be auto closed. Can be disabled via `autoClose: false`
_Default: `3000, error = 4000, loading = 30000`_ | Yes |
| autoClose | `boolean` | Auto close hot-toast after duration
_Default: `true`_ | Yes |
| position | [`ToastPosition`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastPosition) | The position to place the hot-toast.
_Default: `top-center`_
_[Example](https://ngxpert.github.io/hot-toast/#positions)_ | Yes |
| dismissible | `boolean` | Show close button in hot-toast
_Default: `false`_
_[Example](https://ngxpert.github.io/hot-toast/#dismissible)_ | Yes |
| role | [`ToastRole`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastRole) | Role of the live region.
_Default: `status`_ | Yes |
| ariaLive | [`ToastAriaLive`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastAriaLive) | aria-live value for the live region.
_Default: `polite`_ | Yes |
| theme | [`ToastTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20ToastTheme) | Visual appearance of hot-toast
_Default: `toast`_
_[Example](https://ngxpert.github.io/hot-toast/#snackbar)_ | Yes |
| persist | [`{ToastPersistConfig}`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20class%20ToastPersistConfig) | Useful when you want to keep a persistance for toast based on ids, across sessions.
_[Example](https://ngxpert.github.io/hot-toast/#persistent)_ | No |
| icon | [`Content`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/overview/blob/main/projects/ngxpert/overview/src/lib/views/types.ts&q=export%20type%20Content) | Icon to show in the hot-toast
_[Example](https://ngxpert.github.io/hot-toast/#emoji)_ | Yes |
| iconTheme | [`IconTheme`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20type%20IconTheme) | Use this to change icon color
_[Example](https://ngxpert.github.io/hot-toast/#themed)_ | Yes |
| className | `string` | Extra CSS classes to be added to the hot toast container. | Yes |
| attributes | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype) | Extra attributes to be added to the hot toast container. Can be used for e2e tests. | Yes |
| style | `style object` | Extra styles to apply for hot-toast.
_[Example](https://ngxpert.github.io/hot-toast/#themed)_ | Yes |
| closeStyle | `style object` | Extra styles to apply for close button | Yes |
| data | [`DataType`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=export%20interface%20Toast%3CDataType%3E) | Allows you to pass data for your template and component. You can access the data using `toastRef.data`.
_Examples: [Template with Data](https://ngxpert.github.io/hot-toast/#template-data), [Component with Data](https://ngxpert.github.io/hot-toast/#component-data)_ | No |
| injector | `Injector` | Allows you to pass injector for your component.
_[Example](https://ngxpert.github.io/hot-toast/#injector)_ | No |
| group | [`group`](https://github-link.vercel.app/api?ghUrl=https://github.com/ngxpert/hot-toast/blob/main/projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts&q=group%3F) | Allows you to set group options.
Examples: [Pre-Grouping](https://ngxpert.github.io/hot-toast/#pre-grouping), [Post-Grouping](https://ngxpert.github.io/hot-toast/#post-grouping) | No |
---
## Supported Browsers
Latest versions of Chrome, Edge, Firefox and Safari are supported, with some known [issues](https://github.com/ngxpert/hot-toast/labels/browser).
## Accessibility
Hot-toast messages are announced via an `aria-live` region. By default, the `polite` setting is used. While `polite` is recommended, this can be customized by setting the `ariaLive` property of the `ToastConfig` or `ToastOptions`.
Focus is not, and should not be, moved to the hot-toast element. Moving the focus would be disruptive to a user in the middle of a workflow. It is recommended that, for any action offered in the hot-toast, the application offers the user an alternative way to perform the action. Alternative interactions are typically keyboard shortcuts or menu options. When the action is performed in this way, the hot-toast should be dismissed.
Hot-toasts that have an [action available](https://ngxpert.github.io/hot-toast/#template) should be set `autoClose: false`, as to accommodate screen-reader users that want to navigate to the hot-toast element to activate the action.
## Breaking Changes
### v1 to v2
The `
` surrounding `` is removed from `.hot-toast-message` to better and easy structure of layout. User may need to check their templates after updating to v2.
### v2 to v3
None
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Dharmen Shah
💻 🖋 🎨 📖 💡
Netanel Basal
🐛 💼 🤔 🚧 🧑🏫 📆 🔬 👀
Timo Lins
🎨 🤔
Patrick Miller
🚧 📦
Gili Yaniv
💻
Artur Androsovych
🚧
Luis Castro
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!