{"id":25617686,"url":"https://github.com/mrsiefen/notifier","last_synced_at":"2026-04-21T10:02:55.418Z","repository":{"id":275693733,"uuid":"926891775","full_name":"mrSiefen/Notifier","owner":"mrSiefen","description":"A lightweight JavaScript helper that makes it easy to display Bootstrap notifications on your web pages. It supports both module and non-module usage, allows for flexible configuration, and integrates seamlessly with Bootswatch themes and dark/light mode toggling.","archived":false,"fork":false,"pushed_at":"2025-02-04T04:19:41.000Z","size":94,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T13:38:43.216Z","etag":null,"topics":["bootstrap5","bootswatch","javascript","notifications"],"latest_commit_sha":null,"homepage":"https://mrsiefen.github.io/Notifier/","language":"HTML","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/mrSiefen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-04T03:15:02.000Z","updated_at":"2025-02-04T04:19:44.000Z","dependencies_parsed_at":"2025-02-04T04:33:35.787Z","dependency_job_id":null,"html_url":"https://github.com/mrSiefen/Notifier","commit_stats":null,"previous_names":["mrsiefen/notifier"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mrSiefen/Notifier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrSiefen%2FNotifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrSiefen%2FNotifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrSiefen%2FNotifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrSiefen%2FNotifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrSiefen","download_url":"https://codeload.github.com/mrSiefen/Notifier/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrSiefen%2FNotifier/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268028294,"owners_count":24183811,"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","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap5","bootswatch","javascript","notifications"],"created_at":"2025-02-22T05:24:32.331Z","updated_at":"2026-04-21T10:02:50.372Z","avatar_url":"https://github.com/mrSiefen.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Notifier Helper Class\n\n**Notifier Helper Class** is a lightweight JavaScript helper that makes it easy to display Bootstrap notifications on your web pages. It supports both module and non-module usage, allows for flexible configuration, and integrates seamlessly with Bootswatch themes and dark/light mode toggling.\n\n**Demo:** [Master Demo](https://mrsiefen.github.io/Notifier/index.html)\n\n## Features\n\n- **Simple API:**  \n  Create notifier instances by specifying parameters such as position (`top` or `bottom`), alignment (`left`, `middle`, or `right`), maximum notifications, and auto-dismiss timeout (or no timeout with `-1`).\n\n- **Singleton per Container:**  \n  Multiple instantiations for the same screen area merge into a single notifier with a shared notification queue.\n\n- **Auto‑Dismiss \u0026 Manual Close:**  \n  Notifications automatically dismiss after a configurable timeout unless specified to remain until closed manually.\n\n- **Responsive Design:**  \n  The notification container adjusts its positioning to MIDDLE for smaller screens.\n\n- **Module \u0026 Non‑Module Support:**  \n  Use the helper as a global script (non‑module) or import it as an ES module.\n\n## Files\n\n- **notifier.js**  \n  Non‑module version for global usage. Simply include it with a `\u003cscript\u003e` tag, and it attaches `Notifier` to the global object.\n\n- **notifier.module.js**  \n  ES module version that exports the Notifier class as the default export for module-based projects.\n\n- **index.html**  \n  A master demo page that combines examples, documentation, and custom configuration. This page lets users experiment with every feature of the Notifier class.\n\n- **example_validation.html**  \n  A demo page that showcases how to use the Notifier class for form validation. NON-MODULE VERSION.\n\n- **example_validation.module.html**  \n  A demo page that showcases how to use the Notifier class for form validation. MODULE VERSION.\n\n- **crazy_example.html**  \n  A demo page that showcases spawning notifications in all containers at once. NON-MODULE VERSION.\n\n## Installation\n\nClone or download the repository, then include the desired version of the notifier in your project:\n\n### For Non‑Module (Global) Usage:\nInclude the file in your HTML:\n```html\n\u003cscript src=\"notifier.js\"\u003e\u003c/script\u003e\n```\nThen, create a notifier instance as shown below.\n\n### For ES Module Usage:\nImport the module in your JavaScript:\n```javascript\nimport Notifier from './notifier.module.js';\n```\n\n## Usage Example\n\nCreate a basic notifier instance and display a notification:\n```javascript\n// Create a notifier instance (global usage)\nvar notifier_instance = new Notifier({\n  position: 'top',        // 'top' or 'bottom'\n  alignment: 'right',     // 'left', 'middle', or 'right'\n  max_notifications: 5,   // Maximum number of notifications allowed at once\n  default_timeout: 5000   // Auto-dismiss timeout in milliseconds (-1 for no auto-dismiss)\n});\n\n// Display a success notification\nnotifier_instance.notify(\"Hello, world!\", \"success\");\n```\n\n## Custom Configuration\n\nIn the master demo (index.html), you can dynamically create a custom notifier by selecting parameters such as position, alignment, maximum notifications, and timeout. Then test the custom configuration with a sample notification.\n\n## Theme Support\n\nThe project integrates with Bootswatch 5 themes. In the master demo, a dropdown is populated with themes from the [Bootswatch API](https://bootswatch.com/api/5.json). You can change the theme on the fly, and also toggle between light and dark modes using the Bootstrap `data-bs-theme` attribute.\n\n## Examples\n\n- **Master Demo:**  \n  [index.html](https://mrsiefen.github.io/Notifier/) – Combines spawner, interactive documentation, and custom configuration examples with theme support.\n\n- **Form Validation:**  \n  - [example_validation.html](https://mrsiefen.github.io/Notifier/example_validation.html) – Demonstrates how to use the Notifier class for form validation. NON-MODULE VERSION.\n  - [example_validation.module.html](https://mrsiefen.github.io/Notifier/example_validation_module.html) – Demonstrates how to use the Notifier class for form validation. MODULE VERSION.\n\n- **Crazy Example:**  \n  [crazy_example.html](https://mrsiefen.github.io/Notifier/crazy_example.html) – Spawns notifications in all containers at once. NON-MODULE VERSION.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request with your changes. If you have any issues or feature requests, feel free to open an issue.\n\n## Contact\n\nFor questions or suggestions, please open an issue or contact the project maintainer.\n\n---\n\nEnjoy using the Notifier Helper Class to create clean, responsive notifications for your Bootstrap projects!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsiefen%2Fnotifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrsiefen%2Fnotifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrsiefen%2Fnotifier/lists"}