@ngneat/hot-toast

ngneat hot toast

Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default. Inspired from react-hot-toast

Features

• 🔥 Hot by default
• ☕ Easy to use
• ♿ Accessible
• 🖐️ Reduce motion support
• 😊 Emoji Support
• 🛠 Customizable
• ⏳ Observable API - Automatic loader from an observable
• ✋ Pause on hover - No JavaScript, paused through CSS animation-play-state
• 🔁 Events
• 🔒 Persistent - Opens one toast at a time with unique id. Can be configured.

Installation

You can install it through Angular CLI:

ng add @ngneat/hot-toast

or with npm or yarn:

npm install @ngneat/overview @ngneat/hot-toast

#or

yarn add @ngneat/overview @ngneat/hot-toast

When you install using npm or yarn, you will also need to import HotToastModule in your app.module. You can also set global toast options (Partial<ToastConfig>) here.:

// ..
import { HotToastModule } from '@ngneat/hot-toast';

// ...
@NgModule({
  imports: [HotToastModule.forRoot()],
})

// ...

Basic Usage

// ...
import { HotToastService } from '@ngneat/hot-toast';

@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}
}

showToast() {
  this.toast.show('Hello World!')
}

Examples

You can checkout examples at: https://ngneat.github.io/hot-toast.

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
windowRef	Window & typeof globalThis	Sets the window, from which document will be fetched and hot-toasts will be added to there. Default: window

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.	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	The position to place the hot-toast. Default: top-center	Yes
dismissible	boolean	Show close button in hot-toast Default: false	Yes
role	ToastRole	Role of the live region. Default: status	Yes
ariaLive	ToastAriaLive	aria-live value for the live region. Default: polite	Yes
theme	ToastTheme	Visual appearance of hot-toast Default: toast	Yes
persist	{ToastPersistConfig}	Useful when you want to keep a persistance for toast based on ids, across sessions.	No
icon	Content	Icon to show in the hot-toast	Yes
iconTheme	IconTheme	Use this to change icon color	Yes
className	string	Extra CSS classes to be added to the hot toast container.	Yes
style	any	Extra styles to apply for hot-toast	Yes
closeStyle	any	Extra styles to apply for close button	Yes

---

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dharmen Shah 💻 🖋 🎨 📖 💡

Netanel Basal 🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com