npm package: @sachetacharya/vanilla-toaster
Description: A lightweight, framework-agnostic toast notification library
Author: Sachet Acharya
Latest version: 0.0.1

# Vanilla Toaster

A lightweight, framework-agnostic toast notification library for any JavaScript project.

## Features

- 🚀 Zero dependencies
- 🎯 Multiple toast positions (top-right, top-left, etc.)
- 🌈 Different toast types (success, error, warning, info)
- ⏱️ Configurable durations
- 🖱️ Dismissible toasts
- 🔄 Smooth CSS animations
- 💻 Works with any JavaScript framework or vanilla JS

## Installation

```bash
npm install @sachetacharya/vanilla-toaster --save
```

Or use via CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@sachetacharya/vanilla-toaster/dist/index.min.js"></script>
```

## Usage

### ES Module

```javascript
import toast from '@sachetacharya/vanilla-toaster';

// Show different types of toasts
toast.success('Operation completed successfully!');
toast.error('Something went wrong!');
toast.warning('This is a warning message!');
toast.info('This is an info message!');

// With options
toast.show({
  message: 'Custom toast notification',
  type: 'success',
  duration: 5000,
  position: 'top-right',
  dismissible: true,
  onClose: () => console.log('Toast closed')
});

// Remove a specific toast
const toastId = toast.success('This will be removed');
toast.remove(toastId);

// Clear all toasts
toast.clearAll();
```

### Browser

```html
<script src="https://cdn.jsdelivr.net/npm/@sachetacharya/vanilla-toaster/dist/index.min.js"></script>
<script>
  // VanillaToaster is available in the global scope
  VanillaToaster.success('Operation completed successfully!');
  
  const id = VanillaToaster.error('Something went wrong!');
  
  // Remove after 5 seconds
  setTimeout(() => {
    VanillaToaster.remove(id);
  }, 5000);
</script>
```

## API

### Methods

- **toast.show(options)** - Show a toast with custom options
- **toast.success(message, options)** - Show a success toast
- **toast.error(message, options)** - Show an error toast
- **toast.warning(message, options)** - Show a warning toast
- **toast.info(message, options)** - Show an info toast
- **toast.remove(id)** - Remove a specific toast by ID
- **toast.clearAll()** - Remove all active toasts

### Options

```javascript
{
  message: string;          // Toast message
  type?: 'success' | 'error' | 'warning' | 'info'; // Toast type (default: 'info')
  duration?: number;        // Duration in ms (default: 3000, 0 = no auto-dismiss)
  position?: ToastPosition; // Position on screen (default: 'top-right')
  dismissible?: boolean;    // Can be dismissed by user (default: true)
  onClose?: () => void;     // Callback when toast is closed
}
```

### Available Positions

- `'top-right'` (default)
- `'top-left'`
- `'bottom-right'`
- `'bottom-left'`
- `'top-center'`
- `'bottom-center'`

## Framework Integration

### React

```jsx
import React from 'react';
import toast from '@sachetacharya/vanilla-toaster';

function ToastDemo() {
  return (
    <div>
      <button onClick={() => toast.success('Success message')}>
        Show Success
      </button>
      <button onClick={() => toast.error('Error message')}>
        Show Error
      </button>
    </div>
  );
}
```

### Vue

```vue
<template>
  <div>
    <button @click="showSuccess">Show Success</button>
    <button @click="showError">Show Error</button>
  </div>
</template>

<script>
import toast from '@sachetacharya/vanilla-toaster';

export default {
  methods: {
    showSuccess() {
      toast.success('Success message');
    },
    showError() {
      toast.error('Error message');
    }
  }
}
</script>
```

### Angular

```typescript
import { Component } from '@angular/core';
import toast from '@sachetacharya/vanilla-toaster';

@Component({
  selector: 'app-toast-demo',
  template: `
    <button (click)="showSuccess()">Show Success</button>
    <button (click)="showError()">Show Error</button>
  `
})
export class ToastDemoComponent {
  showSuccess() {
    toast.success('Success message');
  }
  
  showError() {
    toast.error('Error message');
  }
}
```

## License

MIT