{"id":26472798,"url":"https://github.com/kenzycodex/react-cloudbox-alerts","last_synced_at":"2026-02-24T07:41:06.911Z","repository":{"id":281958671,"uuid":"946993305","full_name":"kenzycodex/react-cloudbox-alerts","owner":"kenzycodex","description":"A flexible and customizable alert system for React applications","archived":false,"fork":false,"pushed_at":"2025-03-12T02:54:38.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T03:31:24.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenzycodex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-03-12T01:48:39.000Z","updated_at":"2025-03-12T02:54:41.000Z","dependencies_parsed_at":"2025-03-12T03:31:34.284Z","dependency_job_id":"1430f5e0-8f10-494f-9a1c-2f18fb813387","html_url":"https://github.com/kenzycodex/react-cloudbox-alerts","commit_stats":null,"previous_names":["kenzycodex/react-cloudbox-alerts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenzycodex%2Freact-cloudbox-alerts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenzycodex%2Freact-cloudbox-alerts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenzycodex%2Freact-cloudbox-alerts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenzycodex%2Freact-cloudbox-alerts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenzycodex","download_url":"https://codeload.github.com/kenzycodex/react-cloudbox-alerts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244513912,"owners_count":20464600,"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":[],"created_at":"2025-03-19T21:49:50.711Z","updated_at":"2026-02-24T07:41:01.881Z","avatar_url":"https://github.com/kenzycodex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Cloudbox Alerts\n\nA flexible and powerful alert system for React applications.\n\n![NPM](https://img.shields.io/npm/l/react-cloudbox-alerts)\n![npm](https://img.shields.io/npm/v/react-cloudbox-alerts)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-cloudbox-alerts)\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/kenzycodex/react-cloudbox-alerts/test.yml?branch=main)\n\nReact Cloudbox Alerts provides a complete solution for displaying notifications, toasts, confirmations, and progress indicators in your React applications. With a focus on flexibility, performance, and developer experience, this library makes it easy to add beautiful alerts with minimal setup.\n\n## Features\n\n- 🚀 **Global Alert System** - Show alerts from anywhere in your application\n- ✨ **Multiple Alert Types** - Success, error, warning, info, and custom alerts\n- 🎭 **Animations** - Smooth entrance and exit animations\n- 🌗 **Dark Mode Support** - Seamless integration with light/dark themes\n- 📱 **Responsive Design** - Works on all screen sizes\n- 🔧 **Highly Customizable** - Tailor alerts to match your application's design\n- 🧩 **Modular Architecture** - Use only what you need\n- 📦 **Small Footprint** - Minimal impact on your bundle size\n- 🧪 **Well Tested** - Comprehensive test coverage\n\n## Documentation\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Advanced Usage](#advanced-usage)\n- [API Reference](#api-reference)\n- [Browser Support](#browser-support)\n- [Changelog](CHANGELOG.md)\n- [Contributing Guidelines](CONTRIBUTING.md)\n- [Code of Conduct](CODE_OF_CONDUCT.md)\n- [License](LICENSE)\n\nFor full documentation and examples, visit our [Storybook](https://kenzycodex.github.io/react-cloudbox-alerts).\n\n## Installation\n\n```bash\n# npm\nnpm install react-cloudbox-alerts\n\n# yarn\nyarn add react-cloudbox-alerts\n\n# pnpm\npnpm add react-cloudbox-alerts\n```\n\n## Quick Start\n\n### 1. Set up the AlertContainer\n\nAdd the `AlertContainer` component at the root level of your application:\n\n```jsx\nimport React from 'react';\nimport { AlertContainer } from 'react-cloudbox-alerts';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      {/* Add AlertContainer at the root level */}\n      \u003cAlertContainer position=\"top-right\" /\u003e\n      \n      {/* Your application content */}\n      \u003cmain\u003e\n        \u003ch1\u003eMy Application\u003c/h1\u003e\n        {/* ... */}\n      \u003c/main\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### 2. Show alerts using AlertService\n\nNow you can trigger alerts from anywhere in your application:\n\n```jsx\nimport React from 'react';\nimport { AlertService } from 'react-cloudbox-alerts';\n\nfunction Dashboard() {\n  const handleSave = () =\u003e {\n    // Save data\n    AlertService.success('Data saved successfully!');\n  };\n\n  const handleError = () =\u003e {\n    AlertService.error('An error occurred during the operation.');\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eDashboard\u003c/h2\u003e\n      \u003cbutton onClick={handleSave}\u003eSave Data\u003c/button\u003e\n      \u003cbutton onClick={handleError}\u003eTrigger Error\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Dashboard;\n```\n\n## Advanced Usage\n\n### Theme Integration\n\nThe library includes a built-in theme provider that integrates with your application's theme:\n\n```jsx\nimport React from 'react';\nimport { AlertContainer, ThemeProvider } from 'react-cloudbox-alerts';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cdiv className=\"app\"\u003e\n        \u003cAlertContainer /\u003e\n        {/* Your application content */}\n      \u003c/div\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n\nexport default App;\n```\n\n### Custom Alert Styling\n\nCustomize the appearance of alerts to match your application's design:\n\n```jsx\nimport React from 'react';\nimport { AlertContainer } from 'react-cloudbox-alerts';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cAlertContainer \n        position=\"bottom-center\"\n        containerWidth={400}\n        spacing={15}\n        iconSet=\"fa\" // Use Font Awesome icons\n      /\u003e\n      {/* Your application content */}\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Confirmation Alerts\n\nShow alerts that require user confirmation:\n\n```jsx\nimport { AlertService } from 'react-cloudbox-alerts';\n\nasync function deleteItem() {\n  try {\n    await AlertService.confirm('Are you sure you want to delete this item?', {\n      confirmText: 'Delete',\n      cancelText: 'Cancel',\n      variant: 'danger'\n    });\n    \n    // User confirmed, proceed with deletion\n    await deleteItemFromDatabase();\n    AlertService.success('Item deleted successfully!');\n  } catch (error) {\n    // User cancelled or an error occurred\n    console.log('Operation cancelled');\n  }\n}\n```\n\n### Progress Alerts\n\nShow alerts with progress indicators:\n\n```jsx\nimport { AlertService } from 'react-cloudbox-alerts';\n\nfunction uploadFile(file) {\n  // Create a progress alert\n  const progressAlert = AlertService.progress('Uploading file...', {\n    variant: 'info',\n    withIcon: true,\n  });\n  \n  // Update progress as the operation proceeds\n  const uploadTask = createUploadTask(file);\n  \n  uploadTask.on('progress', (snapshot) =\u003e {\n    const progress = snapshot.bytesTransferred / snapshot.totalBytes;\n    progressAlert.update(`Uploading: ${Math.round(progress * 100)}%`, progress);\n  });\n  \n  uploadTask.on('success', () =\u003e {\n    progressAlert.complete('File uploaded successfully!');\n  });\n  \n  uploadTask.on('error', (error) =\u003e {\n    progressAlert.error(`Upload failed: ${error.message}`);\n  });\n}\n```\n\n## API Reference\n\n### Components\n\n#### `\u003cAlertContainer\u003e`\n\nThe container component that manages and displays alerts.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `position` | string | `'top-right'` | Position of alerts on the screen. Options: `'top-right'`, `'top-left'`, `'top-center'`, `'bottom-right'`, `'bottom-left'`, `'bottom-center'` |\n| `newestOnTop` | boolean | `true` | Whether to show newest alerts on top |\n| `limit` | number | `5` | Maximum number of alerts to show at once (0 = unlimited) |\n| `spacing` | number | `10` | Space between alerts in pixels |\n| `containerWidth` | number | `300` | Container width in pixels |\n| `iconSet` | string | `'ri'` | Icon set to use (e.g., 'ri' for Remix Icons, 'fa' for Font Awesome) |\n| `darkMode` | boolean | - | Override dark mode from theme context |\n| `offset` | number | `20` | Offset from edge of screen in pixels |\n| `zIndex` | number | `9999` | Z-index of the container |\n\n#### `\u003cAlert\u003e`\n\nThe individual alert component (usually used internally by `AlertContainer`).\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | string | `'primary'` | Alert style variant: `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'light'` |\n| `withIcon` | boolean | `false` | Whether to display an icon |\n| `withBackground` | boolean | `false` | Use colored background instead of colored text |\n| `dismissible` | boolean | `false` | Whether the alert can be dismissed |\n| `icon` | string | - | Custom icon class (defaults based on variant) |\n| `autoHideDuration` | number | `0` | Auto-hide duration in milliseconds (0 = no auto-hide) |\n| `animation` | string | `'fade'` | Animation type: `'fade'`, `'slide'`, `'bounce'`, `'zoom'`, `'slide-up'`, `'slide-down'`, `'slide-left'`, `'slide-right'` |\n| `position` | string | `'top'` | Alert position for animations: `'top'`, `'bottom'`, `'left'`, `'right'`, `'center'` |\n| `className` | string | - | Additional CSS classes |\n| `onDismiss` | function | - | Callback function when alert is dismissed |\n| `children` | node | - | Alert content |\n\n#### `\u003cThemeProvider\u003e`\n\nProvider component for theme context.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `defaultDarkMode` | boolean | `false` | Initial dark mode state |\n| `children` | node | - | Child components |\n\n### Services\n\n#### `AlertService`\n\nService for showing alerts programmatically.\n\n| Method | Parameters | Returns | Description |\n|--------|------------|---------|-------------|\n| `show` | `(message, options)` | `alertId` | Shows a generic alert |\n| `success` | `(message, options)` | `alertId` | Shows a success alert |\n| `error` | `(message, options)` | `alertId` | Shows an error alert |\n| `warning` | `(message, options)` | `alertId` | Shows a warning alert |\n| `info` | `(message, options)` | `alertId` | Shows an info alert |\n| `remove` | `(alertId)` | - | Removes an alert by ID |\n| `clear` | - | - | Removes all alerts |\n| `confirm` | `(message, options)` | `Promise` | Shows a confirmation alert |\n| `progress` | `(message, options)` | `{update, complete, error}` | Shows a progress alert |\n\n### Hooks\n\n#### `useTheme`\n\nHook to access theme context.\n\n```jsx\nimport { useTheme } from 'react-cloudbox-alerts';\n\nfunction MyComponent() {\n  const { darkMode, toggleTheme } = useTheme();\n  \n  return (\n    \u003cbutton onClick={toggleTheme}\u003e\n      Switch to {darkMode ? 'Light' : 'Dark'} Mode\n    \u003c/button\u003e\n  );\n}\n```\n\n## Browser Support\n\nReact Cloudbox Alerts supports all modern browsers:\n\n- Chrome (and Chromium-based browsers like Edge)\n- Firefox\n- Safari\n- Opera\n\n## Contributing\n\nWe welcome contributions from the community! Please check out our [Contributing Guidelines](CONTRIBUTING.md) for details on how to get started and our [Code of Conduct](CODE_OF_CONDUCT.md) for our community standards.\n\n## Versioning\n\nThis project follows [Semantic Versioning](https://semver.org/). For the versions available, see the [tags on this repository](https://github.com/kenzycodex/react-cloudbox-alerts/tags).\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenzycodex%2Freact-cloudbox-alerts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenzycodex%2Freact-cloudbox-alerts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenzycodex%2Freact-cloudbox-alerts/lists"}