{"id":13410474,"url":"https://github.com/apvarun/toastify-js","last_synced_at":"2025-05-13T15:12:44.791Z","repository":{"id":37547778,"uuid":"102175783","full_name":"apvarun/toastify-js","owner":"apvarun","description":"Pure JavaScript library for better notification messages","archived":false,"fork":false,"pushed_at":"2024-08-19T08:39:56.000Z","size":142,"stargazers_count":2356,"open_issues_count":49,"forks_count":244,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-08T09:41:55.868Z","etag":null,"topics":["javascript","javascript-library","notifications","toast","toastify"],"latest_commit_sha":null,"homepage":"https://apvarun.github.io/toastify-js/","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/apvarun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["apvarun"],"custom":["https://www.buymeacoffee.com/apvarun"]}},"created_at":"2017-09-02T05:46:45.000Z","updated_at":"2025-05-08T03:22:07.000Z","dependencies_parsed_at":"2024-01-02T23:18:02.214Z","dependency_job_id":"b4d2a4f3-f3f4-4bc1-a6fe-4037f5e3ea29","html_url":"https://github.com/apvarun/toastify-js","commit_stats":{"total_commits":97,"total_committers":34,"mean_commits":"2.8529411764705883","dds":0.5463917525773196,"last_synced_commit":"99a1f1174d4eb6d4f452ec9f89e63649a02e5bf1"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apvarun%2Ftoastify-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apvarun%2Ftoastify-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apvarun%2Ftoastify-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apvarun%2Ftoastify-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apvarun","download_url":"https://codeload.github.com/apvarun/toastify-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253231318,"owners_count":21875080,"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":["javascript","javascript-library","notifications","toast","toastify"],"created_at":"2024-07-30T20:01:07.196Z","updated_at":"2025-05-13T15:12:39.779Z","avatar_url":"https://github.com/apvarun.png","language":"JavaScript","funding_links":["https://github.com/sponsors/apvarun","https://www.buymeacoffee.com/apvarun"],"categories":["JavaScript","Notifications"],"sub_categories":["Runner"],"readme":"\n# Toastify\n\n![Built with JavaScript](https://img.shields.io/badge/Built%20with-JavaScript-red?style=for-the-badge\u0026logo=javascript)\n\n[![toastify-js](https://img.shields.io/badge/toastify--js-1.12.0-brightgreen.svg)](https://www.npmjs.com/package/toastify-js)\n![MIT License](https://img.shields.io/npm/l/toastify-js)\n\nToastify is a lightweight, vanilla JS toast notification library.\n\n## Demo\n\n[Click here](https://apvarun.github.io/toastify-js/)\n\n## Features\n\n* Multiple stacked notifications\n* Customizable\n* No blocking of execution thread\n\n### Customization options\n\n* Notification Text\n* Duration\n* Toast background color\n* Close icon display\n* Display position\n* Offset position\n\n## Installation\n\n#### Toastify now supports installation via NPM\n\n* Run the below command to add toastify-js to your existing or new project.\n\n```\nnpm install --save toastify-js\n```\n\nor\n\n```\nyarn add toastify-js -S\n```\n\n* Import toastify-js into your module to start using it.\n\n```\nimport Toastify from 'toastify-js'\n```\n\nYou can use the default CSS from Toastify as below and later override it or choose to write your own CSS.\n\n```\nimport \"toastify-js/src/toastify.css\"\n```\n\n#### Adding ToastifyJs to HTML page using the traditional method\n\nTo start using **Toastify**, add the following CSS on to your page.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css\"\u003e\n```\n\nAnd the script at the bottom of the page\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/toastify-js\"\u003e\u003c/script\u003e\n```\n\n\u003e Files are delivered via the CDN service provided by [jsdeliver](https://www.jsdelivr.com/)\n\n## Documentation\n\n```javascript\nToastify({\n  text: \"This is a toast\",\n  duration: 3000,\n  destination: \"https://github.com/apvarun/toastify-js\",\n  newWindow: true,\n  close: true,\n  gravity: \"top\", // `top` or `bottom`\n  position: \"left\", // `left`, `center` or `right`\n  stopOnFocus: true, // Prevents dismissing of toast on hover\n  style: {\n    background: \"linear-gradient(to right, #00b09b, #96c93d)\",\n  },\n  onClick: function(){} // Callback after click\n}).showToast();\n```\n\n\u003e Toast messages will be centered on devices with screen width less than 360px.\n\n* See the [changelog](https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md)\n\n### Add own custom classes\n\nIf you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows:\n\n```javascript\nToastify({\n  text: \"This is a toast\",\n  className: \"info\",\n  style: {\n    background: \"linear-gradient(to right, #00b09b, #96c93d)\",\n  }\n}).showToast();\n```\n\nMultiple classes also can be assigned as a string, with spaces between class names.\n\n### Add some offset\n\nIf you want to add offset to the toast, you can do that as follows:\n\n```javascript\nToastify({\n  text: \"This is a toast with offset\",\n  offset: {\n    x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'\n    y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em'\n  },\n}).showToast();\n```\n\nToast will be pushed 50px from right in x axis and 10px from top in y axis.\n\n**Note:**\n\nIf `position` is equals to `left`, it will be pushed from left.\nIf `gravity` is equals to `bottom`, it will be pushed from bottom.\n\n## API\n\n| Option Key | type | Usage | Defaults |\n|-----------------|----------------------|----------------------------------------------------------------------------|-------------|\n| text | string | Message to be displayed in the toast | \"Hi there!\" |\n| node | ELEMENT_NODE | Provide a node to be mounted inside the toast. `node` takes higher precedence over `text` |  |\n| duration | number | Duration for which the toast should be displayed.\u003cbr\u003e-1 for permanent toast | 3000 |\n| selector | string \\| ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added | body |\n| destination | URL string | URL to which the browser should be navigated on click of the toast |  |\n| newWindow | boolean | Decides whether the `destination` should be opened in a new window or not | false |\n| close | boolean | To show the close icon or not | false |\n| gravity | \"top\" or \"bottom\" | To show the toast from top or bottom | \"top\" |\n| position | \"left\" or \"right\" | To show the toast on left or right | \"right\" |\n| backgroundColor | CSS background value | To be deprecated, use `style.background` option instead. Sets the background color of the toast |  |\n| avatar | URL string | Image/icon to be shown before text |  |\n| className | string | Ability to provide custom class name for further customization |  |\n| stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true |\n| callback | Function | Invoked when the toast is dismissed |  |\n| onClick | Function | Invoked when the toast is clicked |  |\n| offset | Object | Ability to add some offset to axis | |\n| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |\n| style | object | Use the HTML DOM Style properties to add any style directly to toast | |\n| ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | \"polite\" |\n| oldestFirst | boolean | Set the order in which toasts are stacked in page | true |\n\n\u003e Deprecated properties: `backgroundColor` -  use `style.background` option instead\n\n## Browsers support\n\n| ![][ie]\u003cbr /\u003eIE / Edge | ![][firefox]\u003cbr /\u003eFirefox | ![][chrome]\u003cbr /\u003eChrome | ![][safari]\u003cbr /\u003eSafari | ![][opera]\u003cbr /\u003eOpera |\n| ---------------------- | ------------------------- | ----------------------- | ----------------------- | --------------------- |\n| IE10, IE11, Edge       | last 10 versions          | last 10 versions        | last 10 versions        | last 10 versions      |\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/AStoker\"\u003e\n        \u003cimg\n          alt=\"AStoker\"\n          src=\"https://avatars.githubusercontent.com/u/2907279?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        AStoker\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/caiomoura1994\"\u003e\n        \u003cimg\n          alt=\"caiomoura1994\"\n          src=\"https://avatars.githubusercontent.com/u/9389139?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        caiomoura1994\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/rndevfx\"\u003e\n        \u003cimg\n          alt=\"rndevfx\"\n          src=\"https://avatars.githubusercontent.com/u/5052076?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        rndevfx\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/1ess\"\u003e\n        \u003cimg\n          alt=\"1ess\"\n          src=\"https://avatars.githubusercontent.com/u/36092926?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        1ess\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/d4rn0k\"\u003e\n        \u003cimg\n          alt=\"d4rn0k\"\n          src=\"https://avatars.githubusercontent.com/u/2183269?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        d4rn0k\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/danielkaiser80\"\u003e\n        \u003cimg\n          alt=\"danielkaiser80\"\n          src=\"https://avatars.githubusercontent.com/u/33827555?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        danielkaiser80\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/skjnldsv\"\u003e\n        \u003cimg\n          alt=\"skjnldsv\"\n          src=\"https://avatars.githubusercontent.com/u/14975046?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        skjnldsv\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/chasedeanda\"\u003e\n        \u003cimg\n          alt=\"chasedeanda\"\n          src=\"https://avatars.githubusercontent.com/u/8203134?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        chasedeanda\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/chrisgraham\"\u003e\n        \u003cimg\n          alt=\"chrisgraham\"\n          src=\"https://avatars.githubusercontent.com/u/195389?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        chrisgraham\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Wachiwi\"\u003e\n        \u003cimg\n          alt=\"Wachiwi\"\n          src=\"https://avatars.githubusercontent.com/u/4199845?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        Wachiwi\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/FeixuRuins\"\u003e\n        \u003cimg\n          alt=\"FeixuRuins\"\n          src=\"https://avatars.githubusercontent.com/u/66232834?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        FeixuRuins\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/gavinhungry\"\u003e\n        \u003cimg\n          alt=\"gavinhungry\"\n          src=\"https://avatars.githubusercontent.com/u/744538?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        gavinhungry\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/haydster7\"\u003e\n        \u003cimg\n          alt=\"haydster7\"\n          src=\"https://avatars.githubusercontent.com/u/4540595?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        haydster7\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/joaquinwojcik\"\u003e\n        \u003cimg\n          alt=\"joaquinwojcik\"\n          src=\"https://avatars.githubusercontent.com/u/3205737?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        joaquinwojcik\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/juliushaertl\"\u003e\n        \u003cimg\n          alt=\"juliushaertl\"\n          src=\"https://avatars.githubusercontent.com/u/3404133?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        juliushaertl\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/mort3za\"\u003e\n        \u003cimg\n          alt=\"mort3za\"\n          src=\"https://avatars.githubusercontent.com/u/510242?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        mort3za\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Sandip124\"\u003e\n        \u003cimg\n          alt=\"Sandip124\"\n          src=\"https://avatars.githubusercontent.com/u/37034590?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        Sandip124\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/Tadaz\"\u003e\n        \u003cimg\n          alt=\"Tadaz\"\n          src=\"https://avatars.githubusercontent.com/u/10881931?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        Tadaz\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/t12ung\"\u003e\n        \u003cimg\n          alt=\"t12ung\"\n          src=\"https://avatars.githubusercontent.com/u/9781423?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        t12ung\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/victorfeijo\"\u003e\n        \u003cimg\n          alt=\"victorfeijo\"\n          src=\"https://avatars.githubusercontent.com/u/8865899?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        victorfeijo\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/fiatjaf\"\u003e\n        \u003cimg\n          alt=\"fiatjaf\"\n          src=\"https://avatars.githubusercontent.com/u/1653275?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        fiatjaf\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/prousseau-korem\"\u003e\n        \u003cimg\n          alt=\"prousseau-korem\"\n          src=\"https://avatars.githubusercontent.com/u/59747802?v=4\"\n          width=\"117\"\n        /\u003e\n        \u003cbr /\u003e\n        prousseau-korem\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## License\n\nMIT © [Varun A P](https://github.com/apvarun)\n\n\u003ca href=\"https://www.buymeacoffee.com/apvarun\" target=\"_blank\" rel=\"noopener\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" height=\"40\" width=\"145\" alt=\"Buy Me A Coffee\"\u003e\u003c/a\u003e\n\n[ie]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png\n[firefox]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png\n[chrome]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png\n[safari]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png\n[opera]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapvarun%2Ftoastify-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapvarun%2Ftoastify-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapvarun%2Ftoastify-js/lists"}