@lakea/gravity-toast-adapter-ngneat-hot-toast

An adapter for GrToast using @ngneat/hot-toast as implementation.

Installation

Install the library using NPM:

npm install @lakea/gravity-toast-adapter-ngneat-hot-toast @ngneat/overview @ngneat/hot-toast --save

Add this line to your main styles.scss:

@use 'node_modules/@lakea/gravity-toast-adapter-ngneat-hot-toast/styles/styles.scss';

Next, create a new file, toast-adapter-root.module.ts which exposes an Angular's module with a default configuration.

import {NgModule} from '@angular/core';
import {HotToastModule} from '@ngneat/hot-toast';
import {GrToast} from '@lakea/gravity/ui';
import {GrToastAdapterNgneatHotToast} from '@lakea/gravity-toast-adapter-ngneat-hot-toast';

const TOAST_STYLE = {
  style: {
    color: 'var(--gr-toast-color, var(--gr-color-background-contrast))',
    background: 'var(--gr-toast-background-color, var(--gr-color-background))',
    border: 'var(--gr-toast-border, 1px solid var(--gr-color-border))',
    padding: 'var(--gr-toast-padding, 8px 16px)',
    borderRadius: 'var(--gr-toast-border-radius, 8px)',
    wordBreak: 'break-word',
    maxWidth: 'var(--gr-toast-max-width, 60vw)',
  },
  closeStyle: {
    color: 'var(--gr-toast-close-btn-color, var(--gr-color-background-contrast))',
    marginLeft: 'var(--gr-toast-close-btn-margin-left, 16px)',
    cursor: 'pointer',
    backgroundImage:
      "var(--gr-toast-close-btn-background-image, url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' %3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e\"))",
  },
};

@NgModule({
  imports: [
    HotToastModule.forRoot({
      ...TOAST_STYLE,
    }),
  ],
  providers: [
    {
      provide: GrToast,
      useClass: GrToastAdapterNgneatHotToast,
    },
  ],
})
export class ToastAdapterRootModule {}

Import ToastAdapterRootModule to application root module like app.module.ts.

You should import the ToastAdapterRootModule once in your root module.

The ToastAdapterRootModule file imports the HotToastModule from @ngneat/hot-toast library with a default style config and provide the adapter implementation too.

To configure the @ngneat/hot-toast library, read the docs here.

Creating your own adapter

Create your adapter implementation class extending GrToast abstraction:

import {Injectable} from '@angular/core';

import {GrToast, GrToastObservableMessages, GrToastOptions, GrToastRef} from '@lakea/gravity/ui';

@Injectable()
export class GrToastAdapter extends GrToast {
  constructor() {
    super();
  }

  public success(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public info(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public warning(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public error(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public loading(message: string, options?: GrToastOptions): GrToastRef {
    // YOUR IMPLEMENTATION
  }

  public observe<T>(messages: GrToastObservableMessages): (source: Observable<T>) => Observable<T> {
    // YOUR IMPLEMENTATION
  }
}

So, provide it on your application root module (maybe app.module.ts), like this:

  providers: [
    {
      provide: GrToast,
      useClass: GrToastAdapter,
    }
  ]