Nothing Precedes Matter

    @ngneat/hot-toast
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published


    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

    Compatibility with Angular Versions

    @ngneat/hot-toast Angular
    3.x >= 9.1.13 < 13
    4.x >= 13

    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:

    # For Angular version >= 9.1.13 < 13
    npm install @ngneat/overview@2.0.2 @ngneat/hot-toast@3
    
    # For Angular version >=13
    npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4

    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!');
        this.toast.info('Something...');
      }
    
      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.
    Example
    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
    Example
    Yes
    dismissible boolean Show close button in hot-toast
    Default: false
    Example
    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
    Example
    Yes
    persist {ToastPersistConfig} Useful when you want to keep a persistance for toast based on ids, across sessions.
    Example
    No
    icon Content Icon to show in the hot-toast
    Example
    Yes
    iconTheme IconTheme Use this to change icon color
    Example
    Yes
    className string Extra CSS classes to be added to the hot toast container. Yes
    attributes Record<string, string> 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
    Yes
    closeStyle style object Extra styles to apply for close button Yes
    data DataType Allows you to pass data for your template and component. You can access the data using toastRef.data.
    Examples: Template with Data, Component with Data
    No
    injector Injector Allows you to pass injector for your component.
    Example
    No

    Supported Browsers

    Latest versions of Chrome, Edge, Firefox and Safari are supported, with some known issues.

    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 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

    2.0.2 -> 3.0.0

    • Content inside .hot-toast-message were wrapped into dynamic-content, now they are wrapped into div > dynamic-view
    • Use optional chaining while access toastRef in template. E.g. toastRef?.data
    • Add @Optional() decorator in components' constructor while injecting tokens which are used by toast's injector

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Dharmen Shah

    💻 🖋 🎨 📖 💡

    Netanel Basal

    🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀

    Timo Lins

    🎨 🤔

    Patrick Miller

    🚧 📦

    Gili Yaniv

    💻

    Artur Androsovych

    🚧

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

    Icons made by Freepik from www.flaticon.com

    Install

    npm i @ngneat/hot-toast

    DownloadsWeekly Downloads

    6,384

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    512 kB

    Total Files

    59

    Last publish

    Collaborators

    • netanel-ngneat
    • itayod
    • shahar.kazaz