{"id":21076101,"url":"https://github.com/shaack/bootstrap-show-toast","last_synced_at":"2025-05-16T06:32:04.237Z","repository":{"id":57938894,"uuid":"529198862","full_name":"shaack/bootstrap-show-toast","owner":"shaack","description":"A Bootstrap plugin for Toasts, to show them with pure JS","archived":false,"fork":false,"pushed_at":"2023-08-01T10:18:47.000Z","size":21,"stargazers_count":19,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-03T22:08:55.239Z","etag":null,"topics":["alert","bootstrap","javascript","js","toast"],"latest_commit_sha":null,"homepage":"","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/shaack.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}},"created_at":"2022-08-26T09:39:11.000Z","updated_at":"2024-09-28T16:37:09.000Z","dependencies_parsed_at":"2023-01-18T20:00:33.536Z","dependency_job_id":null,"html_url":"https://github.com/shaack/bootstrap-show-toast","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaack","download_url":"https://codeload.github.com/shaack/bootstrap-show-toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225412884,"owners_count":17470466,"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":["alert","bootstrap","javascript","js","toast"],"created_at":"2024-11-19T19:26:37.064Z","updated_at":"2025-05-16T06:32:04.231Z","avatar_url":"https://github.com/shaack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-show-toast\n\nA Bootstrap 5 plugin for [Bootstrap Toasts](https://getbootstrap.com/docs/5.3/components/toasts/), to show them with pure JS, no HTML needed.\n\n## References\n\n- [Demo page](https://shaack.com/projekte/bootstrap-show-toast)\n- [GitHub repository](https://github.com/shaack/bootstrap-show-toast)\n- [npm package](https://www.npmjs.com/package/bootstrap-show-toast)\n\n## Installation\n\n```sh\nnpm install bootstrap-show-toast\n```\n\n## Usage\n\n```js\n// simple example\nbootstrap.showToast({body: \"Hello Toast!\"})\n\n// type danger\nbootstrap.showToast({\n    header: \"Alert\",\n    body: \"Red Alert!\",\n    toastClass: \"text-bg-danger\"\n})\n\n// more complex toast with header and buttons\nconst toast = bootstrap.showToast({\n    header: \"Information\",\n    headerSmall: \"just now\",\n    body: \"\u003cp\u003eThis notification has a headline and more text than the previous one.\u003c/p\u003e\u003cdiv\u003e\u003cbutton class='btn btn-primary me-1 btn-sm'\u003eClick me\u003c/button\u003e\u003cbutton class='btn btn-secondary btn-sm' data-bs-dismiss='toast'\u003eClose\u003c/button\u003e\u003c/div\u003e\",\n    delay: 20000\n})\ntoast.element.querySelector(\".btn-primary\").addEventListener(\"click\", () =\u003e {\n    bootstrap.showToast({\n        body: \"Thank you for clicking\", direction: \"append\", \n        toastClass: \"text-bg-success\", closeButtonClass: \"btn-close-white\"\n    })\n})\n\n// type secondary and sticky\nbootstrap.showToast({\n    body: \"This notification will stay\", \n    toastClass: \"text-bg-secondary\", closeButtonClass: \"btn-close-white\", \n    delay: Infinity // delay of `Infinity` to make it sticky\n})\n```\n\n## Props (defaults)\n\n```js\nthis.props = {\n    header: \"\", // the header text\n    headerSmall: \"\", // additional text in the header, aligns right\n    body: \"\", // the body text of the toast\n    closeButton: true, // show a close button\n    closeButtonLabel: \"close\", // the label of the close button\n    closeButtonClass: \"\", // set to \"btn-close-white\" for dark backgrounds\n    toastClass: \"\", // the appearance\n    animation: true, // apply a CSS fade transition to the toast\n    delay: 5000, //\tdelay in milliseconds before hiding the toast, set delay to `Infinity` to make it sticky\n    position: \"top-0 end-0\", // top right\n    direction: \"append\", // or \"prepend\", the stack direction\n    ariaLive: \"assertive\"\n}\n```\n\n---\n\nFind more high quality modules from [shaack.com](https://shaack.com)\non [our projects page](https://shaack.com/works).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-show-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaack%2Fbootstrap-show-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-show-toast/lists"}