\n\n## โจ Features\n\n- ๐ **Simple API**: Easy to integrate and use\n- ๐จ **Beautiful Animations**: Powered by GSAP for buttery-smooth transitions\n- ๐ฏ **Multiple Positions**: Display toasts at any corner of the screen\n- ๐ฅ **Interactive**: Hover effects and click handling\n- ๐ฑ **Fully Responsive**: Works on all device sizes\n- ๐ญ **Variants**: Success, Error, Warning, Info, Fire, Rain, Smoke, Cyberpunk, Dragon Ball, and Water Flow styles\n- โก **Lightweight**: Minimal bundle size impact\n- ๐จ **Customizable**: Full control over appearance and behavior\n- ๐ **Queue System**: Handles multiple toasts gracefully\n- โฑ **Auto-dismiss**: Configurable duration for each toast\n\n## ๐ Tech Stack\n\n- โ๏ธ React 16.8+ (Hooks)\n- ๐ซ GSAP for animations\n- ๐ช Zustand for state management\n- ๐จ React Icons for beautiful icons\n- ๐ฆ TypeScript for type safety\n\n## ๐ฆ Installation\n\n### For React 16.8+\n\n```bash\nnpm install toastonstaroid\n# or\nyarn add toastonstaroid\n```\n\n### Peer Dependencies\n\nMake sure you have these peer dependencies installed:\n\n- `react` (>=16.8.0)\n- `react-dom` (>=16.8.0)\n- `react-icons` (>=4.0.0)\n- `gsap` (>=3.0.0)\n- `zustand` (>=4.0.0)\n\n## ๐ Quick Start\n\n1. First, wrap your app with the `ToastContainer` component:\n\n```jsx\nimport React from \"react\";\nimport { ToastContainer } from \"toastonstaroid\";\n\nfunction App() {\n return (\n
\n \n \n
\n );\n}\n\nexport default App;\n```\n\n2. Use the `toast` function to show notifications:\n\n```jsx\nimport React from \"react\";\nimport { toast } from \"toastonstaroid\";\n\nfunction MyComponent() {\n const showToast = () => {\n // Success toast\n toast.success(\"Operation completed successfully!\");\n\n // Error toast\n toast.error(\"Something went wrong!\");\n\n // Warning toast\n toast.warning(\"This action cannot be undone\");\n\n // Info toast\n toast.info(\"New update available\");\n\n // With custom duration (5 seconds)\n toast.success(\"Changes saved!\", 5000);\n };\n\n return (\n \n );\n}\n\nexport default MyComponent;\n```\n\n### Available Toast Types\n\n```jsx\n// Success toast\ntoast.success(\"Operation completed successfully!\");\n\n// Error toast\ntoast.error(\"Something went wrong!\");\n\n// Warning toast\ntoast.warning(\"This action cannot be undone\");\n\n// Info toast\ntoast.info(\"New update available\");\n\n// Fire toast (for important alerts)\ntoast.fire(\"Critical system update required!\");\n\n// Rain toast (for notifications)\ntoast.rain(\"New message received\");\n\n// Smoke toast (for subtle notifications)\ntoast.smoke(\"Settings saved\");\n\n// Cyberpunk toast (for futuristic UI)\ntoast.cyberpunk(\"System initialized\");\n\n// Dragon Ball Z style\ntoast.dragonball(\"Power level over 9000!\");\n\n// Water Flow style\ntoast.waterflow(\"Your changes have been saved\");\n\n// Basic toast\ntoast.basic(\"This is a simple notification\");\ntoast.basic(\"With custom styling\", {\n iconColor: \"#3b82f6\",\n textColor: \"#1f2937\",\n duration: 5000\n});\n```\n\n### Customizing Duration\n\n```jsx\n// Show for 5 seconds (default is 3000ms)\ntoast.success(\"Profile updated!\", 5000);\n\n// Show until manually closed\ntoast.info(\"Processing...\", 0);\n```\n\n## ๐ญ Variants\n\nToastonstaroid comes with a variety of beautiful toast variants, each with unique animations and styles:\n\n| Variant | Description | Example |\n| ------------ | --------------------------------------------- | ----------------------------------------------- |\n| `success` | Indicates a successful operation | `toast.success('Operation completed!')` |\n| `error` | Indicates an error that needs attention | `toast.error('Something went wrong!')` |\n| `warning` | For warning messages | `toast.warning('This action cannot be undone')` |\n| `info` | General information | `toast.info('New message received')` |\n| `fire` | Fiery animation for important alerts | `toast.fire('Hot! New message')` |\n| `rain` | Rain effect for notifications | `toast.rain('Don\\'t forget your umbrella!')` |\n| `smoke` | Smoke effect for subtle notifications | `toast.smoke('Poof! It\\'s gone')` |\n| `cyberpunk` | Futuristic cyberpunk style | `toast.cyberpunk('Access granted')` |\n| `dragonball` | Anime-inspired with energy aura and particles | `toast.dragonball('Power level over 9000!')` |\n| `waterflow` | Smooth flowing water animation with bubbles | `toast.waterflow('Changes saved successfully')` |\n| `basic` | Clean, simple notifications with solid white background and black text | `toast.basic('This is a simple notification')` |\n\n### Basic Variants\n\n#### Success Toast\n\nIndicates a successful operation.\n\n```jsx\ntoast.success(\"Operation completed successfully!\");\n```\n\n#### Error Toast\n\nIndicates an error that needs attention.\n\n```jsx\ntoast.error(\"Failed to save changes\");\n```\n\n#### Warning Toast\n\nFor warning messages.\n\n```jsx\ntoast.warning(\"This action cannot be undone\");\n```\n\n#### Info Toast\n\nFor general information.\n\n```jsx\ntoast.info(\"New message received\");\n```\n\n#### Basic Toast\n\nClean, simple notifications with solid white background and black text.\n\n```jsx\ntoast.basic(\"This is a simple notification\");\ntoast.basic(\"With custom styling\", {\n iconColor: \"#3b82f6\",\n textColor: \"#1f2937\",\n duration: 5000\n});\n```\n\n### Animated Variants\n\n#### Fire Toast\n\nFiery animation for important alerts.\n\n```jsx\ntoast.fire(\"Hot! New message\");\n```\n\n#### Rain Toast\n\nRain effect for notifications.\n\n```jsx\ntoast.rain(\"Don't forget your umbrella!\");\n```\n\n#### Smoke Toast\n\nSmoke effect for subtle notifications.\n\n```jsx\ntoast.smoke(\"Poof! It's gone\");\n```\n\n#### Cyberpunk Toast\n\nFuturistic cyberpunk style.\n\n```jsx\ntoast.cyberpunk(\"Access granted\");\n```\n\n#### Dragon Ball Z Style\n\nAnime-inspired with energy aura and particles.\n\n```jsx\ntoast.dragonball(\"Power level over 9000!\");\n```\n\n#### Water Flow\n\nSmooth flowing water animation with bubbles.\n\n```jsx\ntoast.waterflow(\"Changes saved successfully\");\n```\n\n### Custom Duration\n\n```jsx\n// Show for 5 seconds\ntoast.success(\"Profile updated!\", 5000);\n\n// Show until manually closed\ntoast.info(\"Processing...\", 0);\n```\n\n## ๐๏ธ Configuration\n\n### ToastContainer Props\n\n| Prop | Type | Default | Description |\n| -------------- | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| `position` | `string` | `'top-right'` | Position of the toast container. Options: `'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` |\n| `autoClose` | `number` | `3000` | Auto close timeout in milliseconds (`0` to disable) |\n| `closeOnClick` | `boolean` | `true` | Close toast when clicked |\n| `pauseOnHover` | `boolean` | `true` | Pause toast timer on hover |\n| `className` | `string` | `''` | Additional CSS class for the container |\n| `style` | `React.CSSProperties` | `{}` | Inline styles for the container |\n\n### Toast Methods\n\n```typescript\n// Show a toast\ntoast.success(message: string, options?: ToastOptions): string;\ntoast.error(message: string, options?: ToastOptions): string;\ntoast.warning(message: string, options?: ToastOptions): string;\ntoast.info(message: string, options?: ToastOptions): string;\ntoast.fire(message: string, options?: ToastOptions): string;\ntoast.rain(message: string, options?: ToastOptions): string;\ntoast.smoke(message: string, options?: ToastOptions): string;\ntoast.cyberpunk(message: string, options?: ToastOptions): string;\ntoast.basic(message: string, options?: ToastOptions): string;\n\n// Remove a toast\ntoast.dismiss(toastId: string): void;\n\n// Remove all toasts\ntoast.dismissAll(): void;\n\n// Update a toast\ntoast.update(toastId: string, options: ToastOptions): void;\n```\n\n### Toast Options\n\n| Option | Type | Default | Description |\n| ------------ | --------------------- | --------- | ------------------------------------------- |\n| `toastId` | `string` | Random ID | Custom ID for the toast |\n| `duration` | `number` | `3000` | Display duration in ms |\n| `onClose` | `() => void` | - | Callback when toast closes |\n| `onOpen` | `() => void` | - | Callback when toast opens |\n| `className` | `string` | - | Additional CSS class |\n| `style` | `React.CSSProperties` | - | Inline styles |\n| `textColor` | `string` | - | Custom text color (e.g., '#FF0000', 'blue') |\n| `iconColor` | `string` | - | Custom icon color (e.g., '#00FF00', 'red') |\n| `backgroundStyle` | `'blur' | 'solid'` | 'blur' | Background style (blur or solid) |\n\n## ๐ API\n\n### Toast Methods\n\nAll toast methods accept the following parameters:\n\n- `message: string` - The message to display\n- `duration?: number` - (Optional) Time in milliseconds the toast should be visible (default: 5000ms)\n\n#### Basic Variants\n\n```typescript\nimport { toast } from \"toastonstaroid\";\n\ntoast.success(\"Operation completed successfully!\");\ntoast.error(\"Something went wrong!\");\ntoast.warning(\"This action cannot be undone!\");\ntoast.info(\"New update available!\");\n```\n\n#### Themed Variants\n\n```typescript\n// Fire theme\ntoast.fire(\"Hot notification!\");\n\n// Rain theme\ntoast.rain(\"Bring an umbrella! โ\");\n\n// Smoke theme\ntoast.smoke(\"Poof!\");\n\n// Cyberpunk theme\ntoast.cyberpunk(\"System updated!\");\n\n// Dragon Ball theme\ntoast.dragonball(\"Power level over 9000!\");\n\n// Water Flow theme\ntoast.waterflow(\"Smooth as water\");\n```\n\n### ToastContainer Component\n\nThe `ToastContainer` component is required in your app to display the toasts. Place it once in your app layout.\n\n```jsx\nimport { ToastContainer } from \"toastonstaroid\";\n\nfunction App() {\n return (\n
\n \n \n
\n );\n}\n```\n\n#### Props\n\n| Prop | Type | Default | Description |\n| --------- | -------------------------------------------------------------------- | ------------- | ------------------------------- |\n| position | `'top-right'` \\| `'top-left'` \\| `'bottom-right'` \\| `'bottom-left'` | `'top-right'` | Position of the toast container |\n| className | `string` | `''` | Additional CSS class name |\n| style | `React.CSSProperties` | `{}` | Inline styles for the container |\n\n### Customization\n\nYou can customize the default duration for all toasts by setting the duration parameter:\n\n```typescript\n// Show success toast for 10 seconds\ntoast.success(\"Saved successfully!\", 10000);\n```\n\n### Styling with CSS Variables\n\nCustomize the look using these CSS variables:\n\n```css\n:root {\n /* Base styles */\n --toast-bg: rgba(30, 41, 59, 0.95);\n --toast-text: #ffffff;\n --toast-border: rgba(255, 255, 255, 0.1);\n --toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n /* Layout */\n --toast-padding: 12px 16px;\n --toast-spacing: 16px;\n --toast-border-radius: 8px;\n\n /* Typography */\n --toast-font-size: 14px;\n --toast-line-height: 1.5;\n\n /* Icons */\n --toast-icon-size: 20px;\n\n /* Animations */\n --toast-animation-duration: 300ms;\n}\n```\n\n### Custom Animations\n\nYou can customize the enter/exit animations by providing your own CSS classes:\n\n```jsx\n\n```\n\n## ๐ Advanced Usage\n\n### Programmatic Control\n\n```jsx\nimport { useToastStore } from \"toastonstaroid\";\n\nfunction MyComponent() {\n const { toasts, removeToast } = useToastStore();\n\n const showTemporaryToast = () => {\n const toastId = toast.info(\"This will be removed in 2 seconds\");\n\n setTimeout(() => {\n removeToast(toastId);\n }, 2000);\n };\n\n return (\n
\n ))}\n \n );\n}\n```\n\n## ๐ฑ Responsive Design\n\nToasts are fully responsive and adapt to different screen sizes:\n\n- **Mobile**: Full width with 16px margins\n- **Tablet**: 400px width\n- **Desktop**: 320px width\n- **Large Screens**: 360px width\n\n## โ ๏ธ Troubleshooting\n\n### Common Issues\n\n1. **Toasts not showing up?**\n\n - Ensure `` is rendered in your app\n - Check for z-index conflicts\n - Verify no `overflow: hidden` is hiding toasts\n\n2. **Animations not working?**\n\n - Make sure GSAP is installed\n - Check browser console for errors\n - Verify you're not calling toast functions during SSR\n\n3. **TypeScript errors?**\n - Ensure you have `@types/react` installed\n - Check your TypeScript version (requires 4.1+)\n\n## ๐ค Contributing\n\nWe welcome contributions from the community! Before you start, please take a moment to read our [Contribution Guidelines](https://github.com/senapati484/toastonstaroid/blob/new/CONTRIBUTING.md) which includes detailed information on:\n\n- ๐ ๏ธ Setting up your development environment\n- ๐ Code style and conventions\n- ๐งช Testing your changes\n- ๐ก Proposing new features\n- ๐ Reporting bugs\n\n### Quick Start\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\nFor more details, please see our [Contribution Guidelines](https://github.com/senapati484/toastonstaroid/blob/new/CONTRIBUTING.md).\n\n## ๐ License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## ๐ Acknowledgments\n\n- [GSAP](https://greensock.com/gsap/) for smooth animations\n- [React Icons](https://react-icons.github.io/react-icons/) for beautiful icons\n- [Zustand](https://github.com/pmndrs/zustand) for simple state management\n- [react-hot-toast](https://react-hot-toast.com/) for inspiration\n\n---\n\n
\n Made with โค๏ธ by Sayan Senapati\n \n GitHub โข\n NPM โข\n Portfolio\n