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

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

`typescript
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:

`typescript
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(messages: GrToastObservableMessages): (source: Observable) => Observable {
// YOUR IMPLEMENTATION
}
}

`

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

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