Skip to content

🍞 Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.

License

Notifications You must be signed in to change notification settings

adisreyaj/hot-toast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


npm MIT commitizen PRs styled with prettier styled with prettier All Contributors ngneat cypress semantic-release

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!');
  }

  update() {
    saveSettings.pipe(
      this.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
  })],
})
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

Supported Browsers

Latest versions of Chrome, Edge, Firefox and Safari are supported.

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

About

🍞 Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published