{"id":22452169,"url":"https://github.com/brenoroosevelt/toast-js","last_synced_at":"2025-06-14T04:06:23.751Z","repository":{"id":37971090,"uuid":"504320100","full_name":"brenoroosevelt/toast-js","owner":"brenoroosevelt","description":"Toast-js is an easy-to-use, dependency-free and Promise-based Javascript library for system notifications.","archived":false,"fork":false,"pushed_at":"2022-07-04T11:47:41.000Z","size":280,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T22:23:25.719Z","etag":null,"topics":["alert","notification","notify","popup","snack-bar","toast"],"latest_commit_sha":null,"homepage":"https://brenoroosevelt.github.io/toast-js","language":"TypeScript","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/brenoroosevelt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-16T22:11:29.000Z","updated_at":"2024-12-17T02:43:08.000Z","dependencies_parsed_at":"2022-09-04T19:12:03.367Z","dependency_job_id":null,"html_url":"https://github.com/brenoroosevelt/toast-js","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/brenoroosevelt/toast-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brenoroosevelt%2Ftoast-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brenoroosevelt%2Ftoast-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brenoroosevelt%2Ftoast-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brenoroosevelt%2Ftoast-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brenoroosevelt","download_url":"https://codeload.github.com/brenoroosevelt/toast-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brenoroosevelt%2Ftoast-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259756872,"owners_count":22906678,"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","notification","notify","popup","snack-bar","toast"],"created_at":"2024-12-06T06:10:00.247Z","updated_at":"2025-06-14T04:06:23.690Z","avatar_url":"https://github.com/brenoroosevelt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toast-js \nToast-js is an easy-to-use, dependency-free and Promise-based Javascript library for system notifications.\n\n#### ==\u003e\u003e [Live Demo](https://brenoroosevelt.github.io/toast-js) \u003c===\n\n![toast notification image](toast-js.png)\n## Installation\n```bash\nnpm i @brenoroosevelt/toast\n```\n\n## Usage\n```js\nimport toast from '@brenoroosevelt/toast'\n\ntoast.system (\"Hi, i am a notification\", /** options = {} */) \ntoast.info   (\"Hi, i am a notification\", /** options = {} */)\ntoast.warning(\"Hi, i am a notification\", /** options = {} */)\ntoast.error  (\"Hi, i am a notification\", /** options = {} */)\ntoast.success(\"Hi, i am a notification\", /** options = {} */)\ntoast.create (\"Hi, i am a notification\", /** options = {} */)\n```\n\n## Default Options\n| Attribute   | Type                                                               | Default   | Values / Description                                                                                  |\n|-------------|--------------------------------------------------------------------|-----------|-------------------------------------------------------------------------------------------------------|\n| type        | string                                                             | default   | default, system, error, info, warning, success                                                        |\n| title       | string                                                             | undefined | notification title                                                                                    |\n| position    | string                                                             | top       | top, bottom                                                                                           |\n| align       | string                                                             | end       | start, center, end                                                                                    |\n| bgColor     | string                                                             | #333      | css background-color                                                                                  |\n| color       | string                                                             | #fff      | css text color                                                                                        |\n| duration    | number                                                             | 10000     | time in ms, 0 to disable                                                                              |\n| closeBtn    | boolean                                                            | true      | show close button                                                                                     |\n| zIndex      | number                                                             | 99999     | css z-index                                                                                           |\n| dismissible | boolean                                                            | true      | dismiss on click                                                                                      |\n| shadow      | boolean                                                            | true      | display shadow                                                                                        |\n| animateIn   | number                                                             | 200       | animation time in ms; 0 to disable                                                                    |\n| animateOut  | number                                                             | 150       | animation time in ms; 0 to disable                                                                    |\n| append      | boolean                                                            | true      | notifications will be added to the bottom/top of the list; (append=true: bottom), (append=false: top) |\n| maxWidth    | number                                                             | 600       | max width in px                                                                                       |\n| actions     | [{\u003cbr/\u003etext: string, \u003cbr/\u003evalue: any, \u003cbr/\u003ebgColor?: string, \u003cbr/\u003ecolor?: string\u003cbr/\u003e}] | []        | button actions                                                                                        |\n\n```js\nimport toast from '@brenoroosevelt/toast'\n\ntoast.types.default.dismissible = false\ntoast.types.default.maxWidth = 300\n\ntoast.create(\"Hello notification\")  // type: default\n```\n\n## Custom Types\n```js\nimport toast from '@brenoroosevelt/toast'\n\n// define new custom type\ntoast.types.setType('myType', {bgColor: \"blue\", position: \"bottom\", duration: 3000})\ntoast.create(\"Hello error\", {type: \"myType\"})\n\n// override a built-in type configurantion\ntoast.types.setType('error', {position: \"top\", align: \"center\"})\ntoast.error(\"Hello error\")\n```\n\n## Promise based\n```js\ntoast.info(\"hi, i m a notification\").then((result) =\u003e console.log(result))\n    \ntoast.create(\"Notification with actions\", {\n    position: \"top\",\n    actions: [\n        {text: \"Yes\", value: \"ok\"},\n        {text: \"No\", value: \"no\"},\n    ]\n}).then((result) =\u003e {\n    if (result.value === \"ok\") console.log(\"user says `yes`\")\n    if (result.value === \"no\") console.log(\"user says `no`\")\n    if (result.value === \"click\") console.log(\"user click to dismiss\")\n    if (result.value === \"close-btn\") console.log(\"user click close button\")\n    if (result.value === \"timeout\") console.log(\"notification has timed out\")\n})\n```\n\n## CSS override\n```css\ndiv.br-toast-container {\n    margin: 50px;  /*your value*/\n}\n\n#toast-container-top-center { /* bottom|top, start|center|end */\n    margin-top: 50px;  /*your value*/\n}\n\ndiv.br-toast-element {\n    border-radius: 0;  /*your value*/\n}\n\ndiv.br-toast-close-btn {\n    /*your value*/\n}\n\np.br-toast-message {\n    /*your value*/\n}\n\np.br-toast-title {\n    /*your value*/\n}\n\nbutton.br-toast-title {\n    /*your value*/\n}\n```\n\n## License\nThis project is licensed under the terms of the MIT license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrenoroosevelt%2Ftoast-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrenoroosevelt%2Ftoast-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrenoroosevelt%2Ftoast-js/lists"}