arzu-toast-modal 🔔

Beautiful and customizable toast component for React with smooth animations 🚀

📽 Demo

🎨 Design-Figma link

Figma Design File (Click to view)

🖼 Preview

📦 Installation

npm install arzu-toast-modal
# or
yarn add arzu-toast-modal

🚀 Quick Start

import React from 'react';
import { ToastProvider, useToast } from 'arzu-toast-modal';

export default function App() {
  const { showToast } = useToast();

  return (
    <ToastProvider>
      <button
        onClick={() =>
          showToast({
            type: 'success',
            title: 'Success!',
            message: 'Your changes have been saved successfully!',
            duration: 4000,
            position: 'top-right',
          })
        }
      >
        Show Toast
      </button>
    </ToastProvider>
  );
}

⚙️

| Property | Type | Default | Description | | ---------- | -------------------------------------------------------------- | ------------- | ---------------------------------------- | | type | 'success' \| 'error' \| 'warning' \| 'info' | 'info' | Visual variant of the toast | | title | string | — | Bold header text | | message | string | — | Main body text | | duration | number | 3000 | Auto‑dismiss time in ms; 0 disables it | | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | Screen corner |

All props are optional unless marked otherwise.

🎨 Customization

arzu-toast-modal ships with sensible defaults, but you can override styles via CSS variables or pass a custom className in the provider. See the docs for details.

© 2025 Arzu Məmmədova