https://github.com/codersuresh/toast-for-web

Show toast messages in your web application easily, with a simple package.
https://github.com/codersuresh/toast-for-web

frontend npm package ui

Last synced: 5 days ago
JSON representation

Show toast messages in your web application easily, with a simple package.

• Host: GitHub
• URL: https://github.com/codersuresh/toast-for-web
• Owner: coderSuresh
• Created: 2023-07-19T08:17:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-02T03:29:03.000Z (11 months ago)
• Last Synced: 2024-10-30T08:16:44.680Z (16 days ago)
• Topics: frontend, npm, package, ui
• Language: HTML
• Homepage: https://codersuresh.github.io/toast-for-web/
• Size: 37.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Toast for Web

[![npm version](https://badge.fury.io/js/toast-for-web.svg)](https://badge.fury.io/js/toast-for-web)

[![License: MIT](https://img.shields.io/badge/License-MIT-purple.svg)](https://opensource.org/licenses/MIT)

Show toast messages in your web application easily, with a simple package.

That means, you can show an element with a message in your web application, which will disappear after a certain amount of time.

## Features

- Show toast messages in your web application easily

- Show toast messages with different levels

- Show toast messages with different durations

- Click on the toast to dismiss it

## Installation

```bash

npm i toast-for-web

```

## Usage

```js

import showToast from "https://unpkg.com/[email protected]/dist/index.js";

showToast(message, level, duration);

```

## Parameters

| Parameter | Type   | Description                                                        |

| --------- | ------ | ------------------------------------------------------------------ |

| message   | string | Message to show in the toast                                       |

| level     | string | Level of the toast, can be `success`, `warning` or `error` |

| duration  | number | Duration of the toast in milliseconds                              |

## Example

`index.html`

```html

  

    

    Toast for Web

    

    

    

  

  

    Success Toast

    Warning Toast

    Error Toast

  

```

`index.js`

```js

import showToast from "https://unpkg.com/[email protected]/dist/index.js";

const successToast = document.getElementById("success-toast");

const warningToast = document.getElementById("warning-toast");

const errorToast = document.getElementById("error-toast");

document.addEventListener("click", (event) => {

  if (event.target === successToast)

    showToast("This is an info toast", "info", 3000);

  if (event.target === warningToast)

    showToast("This is a warning toast", "warning", 3000);

  if (event.target === errorToast)

    showToast("This is an error toast", "error", 3000);

});

```

## Demo

View demo here: [Demo](https://codersuresh.github.io/toast-for-web/)

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Author

 

[Coder Suresh](https://github.com/coderSuresh)