Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ngneat/hot-toast

Package Overview
Dependencies
Maintainers
3
Versions
75
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngneat/hot-toast

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

  • 7.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6K
decreased by-3.92%
Maintainers
3
Weekly downloads
 
Created
Source


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-toastAngular
3.x >= 9.1.13 < 13
4.x >= 13 < 15
5.x >= 15 < 16
6.x >= 16

Features

  • 🔥 Hot by default
  • Easy to use
  • 🐍 Snackbar variation
  • Accessible
  • 🖐️ Reduce motion support
  • 😊 Emoji Support
  • 🛠 Customizable
  • Observable API
  • Pause on hover
  • 🔁 Events
  • 🔒 Persistent

Installation and setup

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 < 15
npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@4

# For Angular version >= 15 <16
npm install @ngneat/overview@3.0.0 @ngneat/hot-toast@5

# For Angular version >= 16 <17
npm install @ngneat/overview@5.1.1 @ngneat/hot-toast@6

# For Angular version >= 17
npm install @ngneat/overview@6.0.0 @ngneat/hot-toast@7

Module Setup

This is taken care with ng add @ngneat/hot-toast

Now 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 {}

Standalone Setup

import { AppComponent } from './src/app.component';

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

bootstrapApplication(AppComponent, {
  providers: [
    provideHotToastConfig(), // @ngneat/hot-toast providers
  ]
});

Stylings

if you use SCSS add this line to your main styles.scss:

@use '@ngneat/hot-toast/src/styles/styles.scss';

or if you use CSS add this to your styles inside your angular.json:

"styles": [
     "node_modules/@ngneat/hot-toast/src/styles/styles.css",
],

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

Additionally, you have the option of using a standalone function to provide a global toast configuration within your app's configuration file:

// app.config.ts
import { provideHotToastConfig } from '@ngneat/hot-toast';

export const appConfig: ApplicationConfig = {
  providers: [provideHotToastConfig({ ... })],
};

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:

NameTypeDescription
reverseOrderbooleanSets the reverse order for hot-toast stacking
Default: false
visibleToastsnumberSets 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.

NameTypeDescriptionAvailable in global config?
idstringUnique id to associate with hot-toast. There can't be multiple hot-toasts opened with same id.
Example
No
durationnumberDuration in milliseconds after which hot-toast will be auto closed. Can be disabled via autoClose: false
Default: 3000, error = 4000, loading = 30000
Yes
autoClosebooleanAuto close hot-toast after duration
Default: true
Yes
positionToastPositionThe position to place the hot-toast.
Default: top-center
Example
Yes
dismissiblebooleanShow close button in hot-toast
Default: false
Example
Yes
roleToastRoleRole of the live region.
Default: status
Yes
ariaLiveToastAriaLivearia-live value for the live region.
Default: polite
Yes
themeToastThemeVisual 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
iconContentIcon to show in the hot-toast
Example
Yes
iconThemeIconThemeUse this to change icon color
Example
Yes
classNamestringExtra CSS classes to be added to the hot toast container.Yes
attributesRecord<string, string>Extra attributes to be added to the hot toast container. Can be used for e2e tests.Yes
stylestyle objectExtra styles to apply for hot-toast.
Example
Yes
closeStylestyle objectExtra styles to apply for close buttonYes
dataDataTypeAllows 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
injectorInjectorAllows 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

4.1.0 -> 5.0.0

For this version you will also need to import the styles from the library like this if you're not using NgAdd

if you use SCSS add this line to your main styles.scss:

@use 'node_modules/@ngneat/hot-toast/src/styles/styles.scss';

or if you use CSS add this to your styles inside your angular.json:

"styles": [
     "node_modules/@ngneat/hot-toast/src/styles/styles.css",
],

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dharmen Shah
Dharmen Shah

💻 🖋 🎨 📖 💡
Netanel Basal
Netanel Basal

🐛 💼 🤔 🚧 🧑‍🏫 📆 🔬 👀
Timo Lins
Timo Lins

🎨 🤔
Patrick Miller
Patrick Miller

🚧 📦
Gili Yaniv
Gili Yaniv

💻
Artur Androsovych
Artur Androsovych

🚧
Luis Castro
Luis Castro

💻

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

Icons made by Freepik from www.flaticon.com

Keywords

FAQs

Package last updated on 12 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc