{"id":25860132,"url":"https://github.com/ahlgren1234/react-elegant-toasts","last_synced_at":"2026-06-05T01:31:46.063Z","repository":{"id":279757411,"uuid":"939851288","full_name":"ahlgren1234/react-elegant-toasts","owner":"ahlgren1234","description":"A highly customizable, accessible, and elegant toast notification system for React applications","archived":false,"fork":false,"pushed_at":"2025-02-27T09:55:19.000Z","size":277,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T11:40:59.727Z","etag":null,"topics":["accessibility","notifications","react","react-component","react-notifications","react-toast","toast","toast-notifications","typescript","ui-component"],"latest_commit_sha":null,"homepage":"https://ahlgren1234.github.io/react-elegant-toasts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahlgren1234.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-27T08:01:31.000Z","updated_at":"2025-02-27T09:55:22.000Z","dependencies_parsed_at":"2025-02-27T11:44:35.141Z","dependency_job_id":"9459075f-c5d5-436a-9c5b-72c76a0ac5ee","html_url":"https://github.com/ahlgren1234/react-elegant-toasts","commit_stats":null,"previous_names":["ahlgren1234/react-elegant-toasts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahlgren1234%2Freact-elegant-toasts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahlgren1234%2Freact-elegant-toasts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahlgren1234%2Freact-elegant-toasts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahlgren1234%2Freact-elegant-toasts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahlgren1234","download_url":"https://codeload.github.com/ahlgren1234/react-elegant-toasts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241430320,"owners_count":19961636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","notifications","react","react-component","react-notifications","react-toast","toast","toast-notifications","typescript","ui-component"],"created_at":"2025-03-01T21:54:26.391Z","updated_at":"2025-03-01T21:54:26.860Z","avatar_url":"https://github.com/ahlgren1234.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Elegant Toasts\n\n![npm](https://img.shields.io/npm/v/react-elegant-toasts)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-elegant-toasts)\n![npm](https://img.shields.io/npm/dt/react-elegant-toasts)\n![GitHub](https://img.shields.io/github/license/yourusername/react-elegant-toasts)\n\nA highly customizable, accessible, and elegant toast notification system for React applications. Built with TypeScript and modern React practices.\n\n## Features\n\n- 🎨 Highly customizable appearance\n- 🎭 Multiple animation types (slide, fade, zoom, bounce)\n- 📍 6 different positions\n- ⌛ Progress bar with pause on hover\n- 🌓 Dark mode support\n- ♿ Accessibility features (ARIA roles, keyboard navigation)\n- 🔄 RTL support\n- ⚡ Lightweight (~3.5KB gzipped)\n- 📱 Responsive design\n- 🎯 TypeScript support\n- 🧪 Fully tested\n\n## Installation\n\n```bash\nnpm install react-elegant-toasts\n# or\nyarn add react-elegant-toasts\n# or\npnpm add react-elegant-toasts\n```\n\n## Quick Start\n\n```tsx\nimport { ToastProvider, useToast } from 'react-elegant-toasts';\nimport 'react-elegant-toasts/dist/styles.css';\n\n// Wrap your app with ToastProvider\nfunction App() {\n  return (\n    \u003cToastProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/ToastProvider\u003e\n  );\n}\n\n// Use in your components\nfunction YourComponent() {\n  const toast = useToast();\n\n  const showToast = () =\u003e {\n    toast.addToast({\n      type: 'success',\n      title: 'Success!',\n      message: 'Operation completed successfully',\n    });\n  };\n\n  return \u003cbutton onClick={showToast}\u003eShow Toast\u003c/button\u003e;\n}\n```\n\n## Advanced Usage\n\n### Provider Configuration\n\n```tsx\n\u003cToastProvider\n  defaultPosition=\"top-right\"\n  defaultAnimation=\"slide\"\n  defaultDuration={5000}\n  maxToasts={5}\n  pauseOnPageIdle={true}\n  pauseOnFocusLoss={true}\n  containerClassName=\"my-toasts\"\n  containerStyle={{ zIndex: 9999 }}\n\u003e\n  \u003cYourApp /\u003e\n\u003c/ToastProvider\u003e\n```\n\n### Toast Options\n\n```tsx\n// Basic toast\ntoast.addToast({\n  message: 'Simple notification'\n});\n\n// Full configuration\ntoast.addToast({\n  type: 'success',\n  title: 'Custom Toast',\n  message: 'This is a fully customized toast',\n  position: 'bottom-right',\n  animation: 'bounce',\n  duration: 8000,\n  pauseOnHover: true,\n  closeOnClick: true,\n  progressBar: true,\n  rtl: false,\n  className: 'my-toast',\n  style: { backgroundColor: '#4caf50' },\n  icon: \u003cCustomIcon /\u003e,\n  role: 'alert'\n});\n\n// Update existing toast\nconst id = toast.addToast({ message: 'Loading...' });\n// ... after some operation\ntoast.updateToast(id, { \n  type: 'success',\n  message: 'Operation completed!' \n});\n\n// Remove specific toast\ntoast.removeToast(id);\n\n// Remove all toasts\ntoast.removeAll();\n```\n\n### Toast Types\n\n```tsx\n// Success toast\ntoast.addToast({\n  type: 'success',\n  title: 'Success',\n  message: 'Operation completed successfully'\n});\n\n// Error toast\ntoast.addToast({\n  type: 'error',\n  title: 'Error',\n  message: 'Something went wrong'\n});\n\n// Warning toast\ntoast.addToast({\n  type: 'warning',\n  title: 'Warning',\n  message: 'Please check your input'\n});\n\n// Info toast\ntoast.addToast({\n  type: 'info',\n  title: 'Info',\n  message: 'New updates available'\n});\n```\n\n### Animations\n\n```tsx\n// Slide animation\ntoast.addToast({\n  animation: 'slide',\n  message: 'Sliding notification'\n});\n\n// Fade animation\ntoast.addToast({\n  animation: 'fade',\n  message: 'Fading notification'\n});\n\n// Zoom animation\ntoast.addToast({\n  animation: 'zoom',\n  message: 'Zooming notification'\n});\n\n// Bounce animation\ntoast.addToast({\n  animation: 'bounce',\n  message: 'Bouncing notification'\n});\n```\n\n### Custom Styling\n\n```css\n/* Override default styles */\n.toast {\n  /* Custom toast container styles */\n}\n\n.toast.success {\n  /* Custom success toast styles */\n}\n\n.toast-title {\n  /* Custom title styles */\n}\n\n.toast-message {\n  /* Custom message styles */\n}\n\n.toast-progress {\n  /* Custom progress bar styles */\n}\n\n/* Dark mode overrides */\n@media (prefers-color-scheme: dark) {\n  .toast {\n    /* Dark mode styles */\n  }\n}\n```\n\n### TypeScript Support\n\n```tsx\nimport type { \n  ToastProps, \n  ToastPosition, \n  ToastType, \n  ToastAnimation \n} from 'react-elegant-toasts';\n\n// Use in your code\nconst position: ToastPosition = 'top-right';\nconst type: ToastType = 'success';\nconst animation: ToastAnimation = 'slide';\n```\n\n### Usage with Next.js\n\n```tsx\n// app/providers.tsx\n'use client';\n\nimport { ToastProvider } from 'react-elegant-toasts';\nimport 'react-elegant-toasts/dist/styles.css';\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return \u003cToastProvider\u003e{children}\u003c/ToastProvider\u003e;\n}\n\n// app/layout.tsx\nimport { Providers } from './providers';\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cProviders\u003e{children}\u003c/Providers\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Usage with Remix\n\n```tsx\n// app/root.tsx\nimport { ToastProvider } from 'react-elegant-toasts';\nimport toastStyles from 'react-elegant-toasts/dist/styles.css';\n\nexport const links: LinksFunction = () =\u003e [\n  { rel: 'stylesheet', href: toastStyles }\n];\n\nexport default function App() {\n  return (\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cToastProvider\u003e\n          \u003cOutlet /\u003e\n        \u003c/ToastProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n## API Reference\n\n### ToastProvider Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| defaultPosition | ToastPosition | 'top-right' | Default position for toasts |\n| defaultAnimation | ToastAnimation | 'slide' | Default animation type |\n| defaultDuration | number | 5000 | Default duration in milliseconds |\n| maxToasts | number | 5 | Maximum number of toasts shown at once |\n| containerClassName | string | undefined | Custom class for the container |\n| containerStyle | CSSProperties | undefined | Custom styles for the container |\n| pauseOnPageIdle | boolean | true | Pause toasts when page is idle |\n| pauseOnFocusLoss | boolean | true | Pause toasts when window loses focus |\n\n### Toast Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| type | ToastType | 'info' | Type of toast |\n| title | string | undefined | Toast title |\n| message | string | required | Toast message |\n| position | ToastPosition | 'top-right' | Toast position |\n| animation | ToastAnimation | 'slide' | Animation type |\n| duration | number | 5000 | Duration in milliseconds |\n| pauseOnHover | boolean | true | Pause timer on hover |\n| closeOnClick | boolean | true | Close toast on click |\n| progressBar | boolean | true | Show progress bar |\n| rtl | boolean | false | Right-to-left support |\n| className | string | undefined | Custom class name |\n| style | CSSProperties | undefined | Custom styles |\n| icon | ReactNode | undefined | Custom icon |\n| role | string | 'alert' | ARIA role |\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Opera (latest)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nMIT © [Your Name]\n\n## Acknowledgments\n\n- Inspired by the best practices of toast notifications\n- Built with accessibility in mind\n- Designed for modern React applications ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahlgren1234%2Freact-elegant-toasts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahlgren1234%2Freact-elegant-toasts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahlgren1234%2Freact-elegant-toasts/lists"}