{"id":18712223,"url":"https://github.com/vivekweb2013/toastmaker","last_synced_at":"2025-04-12T11:51:29.868Z","repository":{"id":36983654,"uuid":"273948577","full_name":"vivekweb2013/toastmaker","owner":"vivekweb2013","description":"ToastMaker is a light javascript library for showing toast notifications on web page.","archived":false,"fork":false,"pushed_at":"2023-01-06T09:30:51.000Z","size":798,"stargazers_count":52,"open_issues_count":14,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-26T06:34:33.608Z","etag":null,"topics":["html","javascript","javascript-library","notification","notifications","npm-module","react","reactjs","toast","toast-notifications","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://vivekweb2013.github.io/toastmaker/","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/vivekweb2013.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":"2020-06-21T17:04:15.000Z","updated_at":"2024-12-19T00:18:42.000Z","dependencies_parsed_at":"2023-01-17T11:32:23.632Z","dependency_job_id":null,"html_url":"https://github.com/vivekweb2013/toastmaker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekweb2013%2Ftoastmaker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekweb2013%2Ftoastmaker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekweb2013%2Ftoastmaker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekweb2013%2Ftoastmaker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vivekweb2013","download_url":"https://codeload.github.com/vivekweb2013/toastmaker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565003,"owners_count":21125413,"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":["html","javascript","javascript-library","notification","notifications","npm-module","react","reactjs","toast","toast-notifications","vanilla-javascript"],"created_at":"2024-11-07T12:41:18.900Z","updated_at":"2025-04-12T11:51:29.838Z","avatar_url":"https://github.com/vivekweb2013.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vivekweb2013.github.io/toastmaker/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/vivekweb2013/toastmaker/master/docs/favicon.svg\" width=\"250\"\u003e\n  \u003c/a\u003e\n\n  \u003cp align=\"center\"\u003e\n    Small JavaScript Library for Showing Toast Notifications\n    \u003cbr\u003e\n    \u003ca href=\"https://vivekweb2013.github.io/toastmaker/\"\u003e\u003cstrong\u003eDemo \u0026 Documentation\u003c/strong\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n# ToastMaker\n\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vivekweb2013/toastmaker/npm-build?color=forestgreen)](https://github.com/vivekweb2013/toastmaker/actions?query=workflow%3Anpm-build)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vivekweb2013_toastmaker\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=vivekweb2013_toastmaker)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=vivekweb2013_toastmaker\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=vivekweb2013_toastmaker)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=vivekweb2013_toastmaker\u0026metric=code_smells)](https://sonarcloud.io/dashboard?id=vivekweb2013_toastmaker)\n\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/toastmaker)](https://bundlephobia.com/result?p=toastmaker)\n[![npm](https://img.shields.io/npm/v/toastmaker)](https://www.npmjs.com/package/toastmaker)\n[![GitHub](https://img.shields.io/github/license/vivekweb2013/toastmaker?color=blue)](LICENSE)\n\nToast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc.\n\n## Demo\n\n[ToastMaker Demo](https://vivekweb2013.github.io/toastmaker/)\n\n## Features\n\n* [Small Footprint](#bundle-size)\n* Responsive\n* Customizable Styling\n* Can be Used With Vanilla Javascript, NPM Project or ReactJS Project\n* Works With - IE10, IE11, Edge, Chrome, Firefox, Safari, Opera\n* No Dependencies\n* 100% Code Coverage\n\n## Include toastmaker library in your project\n\n### Install toastmaker module in npm project\nYou can install `toastmaker` module in your npm project using npm or yarn.\n\n```\nnpm install --save toastmaker\n```\n\nor\n\n```\nyarn add toastmaker -S\n```\n\nAfter adding the `toastmaker` module to your project, import it in your script as shown below.\n```\nimport ToastMaker from 'toastmaker';\nimport \"toastmaker/dist/toastmaker.css\";\n```\n\n**NOTE:** The `toastmaker.css` is the default css file. If you want you can refer to it and create your own css file and import it instead of this default one.\n\n### Include toastmaker library in a plain html\nToastMaker can also be used with plain vanilla javascript project. Just add the minified javascript and css file in you main html and you can start using it inside the javascript.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/toastmaker/dist/toastmaker.min.css\"\u003e\n\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/toastmaker/dist/toastmaker.min.js\"\u003e\u003c/script\u003e\n```\nIf you want you can download the bundle from the [releases section](https://github.com/vivekweb2013/toastmaker/releases/latest), then include \u0026 reference the files locally rather than using the cdn links.\n\n## How to use?\nUsing `ToastMaker` is very simple. Create a toast by passing the text message, as shown in below example\n\n```javascript\n  ToastMaker('Hi There!');\n```\n\nIf you want to change the default timeout, position, styling etc you can pass the optional arguments. Refer below example.\n\n```javascript\n  ToastMaker('Hi There!', 2000,  {\n    styles: { fontSize: '18px', backgroundColor: 'green' },\n    classList: ['custom-class', 'other-custom-class'],\n    align: 'right',\n    valign: 'top'\n  });\n```\n\n### Use your own styles and css classes\n\nYou can specify multiple styles or your own css classes using `styles` and `classList` options respectively. This is useful in case you want to change the background, font-size, color, padding, border, ... and a lot of other styling as per your requirement.\n\n```javascript\n  ToastMaker(\"Hi There!\", 2000,  {\n    styles: { fontSize: \"15px\" },\n    classList: [\"custom-class\"]\n  });\n```\n\nFor more examples, check out the live demo page - [ToastMaker Demo](https://vivekweb2013.github.io/toastmaker/)\n\n## Options\n\n| Option | Type / Allowed Values | Description | Default | Mandatory?\n|-----------------|-----------------|------------------|-----------------|-----------------|\n| `text` | string | Text message to be shown in toast | N/A | Yes |\n| `timeout` | number | Duration (In milliseconds) for which the toast should be displayed | `3000` | No |\n| `styles` | object | Object containing style properties to be applied to toast | N/A | No |\n| `classList` | array | Array of css classes to be applied to toast | N/A | No |\n| `align` | `'left'` \u003cBR /\u003e `'center'` \u003cBR /\u003e `'right'` | Horizontal alignment for toast | `'center'` | No |\n| `valign` | `'top'` \u003cBR /\u003e `'bottom'` | Vertical alignment for toast | `'bottom'` | No |\n\n**Note:** All options except `text` and `timeout` needs to be wrapped inside an object and passed to the `ToastMaker` as the 3rd argument. \n\nRefer [How to use?](#how-to-use) section to know how these options should be used with the `ToastMaker` function.\n\n\n## Bundle size\n\n|              |                size |                gzip |\n| :----------- | ------------------: | ------------------: |\n| toastmaker   |  ![toastmaker_size] |  ![toastmaker_gzip] |\n| toastify-js  | ![toastify-js_size] | ![toastify-js_gzip] |\n| toastr       |      ![toastr_size] |      ![toastr_gzip] |\n| noty         |        ![noty_size] |        ![noty_gzip] |\n\n[toastmaker_size]: https://img.shields.io/bundlephobia/min/toastmaker\n[toastmaker_gzip]: https://img.shields.io/bundlephobia/minzip/toastmaker\n[toastify-js_size]: https://img.shields.io/bundlephobia/min/toastify-js\n[toastify-js_gzip]: https://img.shields.io/bundlephobia/minzip/toastify-js\n[toastr_size]: https://img.shields.io/bundlephobia/min/toastr\n[toastr_gzip]: https://img.shields.io/bundlephobia/minzip/toastr\n[noty_size]: https://img.shields.io/bundlephobia/min/noty\n[noty_gzip]: https://img.shields.io/bundlephobia/minzip/noty\n\n## Versioning\n\nFor the versions available, see the [tags on this repository](https://github.com/vivekweb2013/toastmaker/tags). \n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekweb2013%2Ftoastmaker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvivekweb2013%2Ftoastmaker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekweb2013%2Ftoastmaker/lists"}