@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
• 🐍 Snackbar variation
• ♿ Accessible
• 🖐️ Reduce motion support
• 😊 Emoji Support
• 🛠 Customizable
• ⏳ Observable API
• ✋ Pause on hover
• 🔁 Events
• 🔒 Persistent

Installation

You can install it through Angular CLI:

ng add @ngneat/hot-toast

or with npm:

npm install @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()],
})
class AppModule {}

Basic Usage

import { HotToastService } from '@ngneat/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!');
  }

  apiToast() {
    // below would your API call
    const saveSettings = from(
            new Promise((res, rej) => {
              setTimeout(Math.random() > 0.5 ? res : rej, 1000);
            })
          );

    saveSettings.pipe(
      toast.observe(
        {
            loading: 'Saving...',
            success: 'Settings saved!',
            error: 'Could not save.',
        }
      )
    ).subscribe();
  }
}

You can pass ToastOptions while creating the toast to customize the look and behavior:

import { HotToastService } from '@ngneat/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 options while importing:

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

@NgModule({
  imports: [HotToastModule.forRoot({
    reverseOrder: true,
    dismissible: true,
    autoClose: false,
    theme: 'snackbar'
  })],
})
class AppModule {}

Examples

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

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

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	style object	Extra styles to apply for hot-toast	Yes
closeStyle	style object	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