https://github.com/DanielJimenezC/makki-toast-package
Customizable toast designed and developed to facilitate the build and management of custom alerts.
https://github.com/DanielJimenezC/makki-toast-package
alert angular frontend notification npm-package
Last synced: 3 months ago
JSON representation
Customizable toast designed and developed to facilitate the build and management of custom alerts.
- Host: GitHub
- URL: https://github.com/DanielJimenezC/makki-toast-package
- Owner: DanielJimenezC
- License: mit
- Created: 2022-08-26T22:19:50.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T14:19:03.000Z (4 months ago)
- Last Synced: 2026-02-25T18:27:02.780Z (4 months ago)
- Topics: alert, angular, frontend, notification, npm-package
- Language: TypeScript
- Homepage: https://danieljimenezc.github.io/makki-toast/
- Size: 115 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - makki-toast-package - A customizable toast component built to streamline the creation and management of tailored alerts. (Third Party Components / Notifications)
- awesome-angular - makki-toast-package - A customizable toast component built to streamline the creation and management of tailored alerts. (Third Party Components / Notifications)
README
Creative makki toast.
Easy to use, customizable & support promise
## Features
- **Easy to use**
- **Customizable**
- **Dark mode**
- **Lightweight**
- **Accessible**
## Installation
#### With NPM
```sh
npm install makki-toast@latest
```
## Getting Started
Add the makki toast and it will take care of render the alerts. From version 2.0.0 it's for Angular 21
#### Import Makki Toast in app.ts
```jsx
import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
import { ToasterComponent } from 'makki-toast'
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, ToasterComponent],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
constructor() {}
}
```
#### Import Makki Toast in app.html
```jsx
```
#### Import Makki Toast in Component
```jsx
import { ToastService } from 'makki-toast'
constructor(
private readonly toast: ToastService,
) {}
```
#### Info
```jsx
this.toast.info({
title: 'Info toast',
description: 'Info toast message',
});
```
#### Success
```jsx
this.toast.success({
title: 'Success toast',
description: 'Success toast message'
});
```
#### Warning
```jsx
this.toast.warning({
title: 'Warning toast',
description: 'Warning toast message'
});
```
#### Error
```jsx
this.toast.error({
title: 'Error toast',
description: 'Error toast message'
});
```
#### Action
```jsx
this.toast.action({
title: 'Action toast',
description: 'Action toast message',
button: {
title: 'View Details',
onClick: () => console.log('show')
},
});
```
#### Promise
```jsx
this.toast.promise(
fetchData(),
{
loading: {
title: 'Loading...',
},
success: (data) => ({
title: 'Complete',
description: 'promise complete message'
}),
error: (err) => ({
title: 'Error',
description: err.message
})
}
);
```
#### Component in description without data
```jsx
this.toast.promise(
fetchData(),
{
loading: {
title: 'Loading...',
},
success: (data) => ({
title: 'Complete',
description: DataComponent
}),
error: (err) => ({
title: 'Error',
description: err.message
})
}
);
```
#### Component in description with share data
```jsx
this.toast.promise(
fetchData(),
{
loading: {
title: 'Loading...',
},
success: (data) => ({
title: 'Complete',
description: {
component: DataComponent,
inputs: {
data: data
}
}
}),
error: (err) => ({
title: 'Error',
description: err.message
})
}
);
export class DataComponent {
@Input() data!: any;
}
```
## Documentation
Find the full documentation on [official documentation](https://danieljimenezc.github.io/makki-toast/docs)