{"id":22012407,"url":"https://github.com/nikitaeverywhere/toaster-js","last_synced_at":"2025-05-06T21:42:42.415Z","repository":{"id":7934621,"uuid":"56910712","full_name":"nikitaeverywhere/toaster-js","owner":"nikitaeverywhere","description":"The vanilla JavaScript ES6 minimalistic toast pup-up messages module for your project.","archived":false,"fork":false,"pushed_at":"2022-12-07T20:20:12.000Z","size":594,"stargazers_count":25,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T22:46:53.111Z","etag":null,"topics":["alerts","css","javascript","messages","notifications","scss","toast","toasts"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/toaster-js","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/nikitaeverywhere.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":"2016-04-23T09:12:05.000Z","updated_at":"2024-03-21T11:42:09.000Z","dependencies_parsed_at":"2023-01-13T15:00:28.148Z","dependency_job_id":null,"html_url":"https://github.com/nikitaeverywhere/toaster-js","commit_stats":null,"previous_names":["nikitaeverywhere/toaster-js","zitros/toaster-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikitaeverywhere%2Ftoaster-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikitaeverywhere%2Ftoaster-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikitaeverywhere%2Ftoaster-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikitaeverywhere%2Ftoaster-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikitaeverywhere","download_url":"https://codeload.github.com/nikitaeverywhere/toaster-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227260753,"owners_count":17754950,"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":["alerts","css","javascript","messages","notifications","scss","toast","toasts"],"created_at":"2024-11-30T03:12:42.404Z","updated_at":"2024-11-30T03:12:43.080Z","avatar_url":"https://github.com/nikitaeverywhere.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toaster-JS\n\n[![npm](https://img.shields.io/npm/v/toaster-js.svg)](https://www.npmjs.com/package/toaster-js)\n[![Dependencies](https://img.shields.io/badge/dependencies-none-brightgreen.svg)](http://npm.anvaka.com/#/view/2d/toaster-js)\n[![BundleSize](https://img.shields.io/bundlephobia/minzip/toaster-js)](https://zitros.github.io/npm-explorer/?p=toaster-js)\n[![npm](https://img.shields.io/npm/dm/toaster-js.svg)](https://www.npmjs.com/package/toaster-js)\n[![License](https://img.shields.io/github/license/zitros/toaster-js.svg)](LICENSE)\n\nThe simple vanilla JavaScript toast pop-up notifications module, which is fully CSS-customizable.\nThe solution which \"just works\": add the module to your project and go further.\n\nSupported by all major browsers. Safe to use with ReactJS and other virtual-dom frameworks.\n\nPreview\n-------\n\n#### [See the demo here.](https://zitros.github.io/toaster-js)\n\n![Screenshot](https://user-images.githubusercontent.com/4989256/29067281-bda23354-7c3a-11e7-83e6-0134711d4b04.png)\n\nFeatures\n--------\n\n+ Fully CSS-customizable toast pop-ups for any design;\n+ No dependencies and `\u003c 1kb` code;\n+ Configurable toasts type and timeout;\n+ Fully configurable toast content (HTML, custom elements, etc).\n\nInstallation \u0026 Usage\n--------------------\n\nToaster-JS is primarily the uncompiled ES6 module. Install it with npm:\n\n```bash\nnpm install toaster-js\n```\n\nThen, include it to your project:\n\n```javascript\nimport { Toast } from \"toaster-js\"; // const { Toast } = require(\"toaster-js/umd.js\");\nimport \"toaster-js/default.scss\"; // Assuming CSS/SCSS loader is present\n// Import styles from SCSS: @import \"../node_modules/toaster-js/default.scss\";\n// Or just copy default styles to your project from node_modules/toaster-js/default.*css. \n// Or draw your own styles! For instance, you can make toasts appear on the left by overwriting .toast { left: 0; right: auto; }\n\n// Simple toast\nnew Toast(\"Welcome!\");\n\n// Typed toast (just a matter of CSS) with timeout\nnew Toast(\"There is a lot of toasts!\", Toast.TYPE_ERROR, Toast.TIME_NORMAL);\n\n// Custom toast content example (you can also add something like close buttons, etc)\nlet element = document.createElement(\"div\");\nelement.textContent = \"You can pass any HTML elements to Toast. Clicking on this one deletes it!\";\nlet newToast = new Toast(element, Toast.TYPE_MESSAGE);\nelement.addEventListener(\"click\", () =\u003e newToast.delete()); // delete a toast on message click!\n```\n\nYou can set up additional options if you need. See the [API](#api) section below for more details.\n\n```javascript\nimport { configureToasts, deleteAllToasts } from \"toaster-js\";\n\nconfigureToasts({\n    topOrigin: 0,\n    deleteDelay: 300\n});\ndeleteAllToasts(); // just deletes all toasts on the screen\n```\n\nIf you need to load ES5 (UMD) module, use the following:\n\n```javascript\nconst { Toast } = require(\"toaster-js/umd.js\");\n```\n\nIf you need to include the module with a script tag (for example, for demos), use this:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/toaster-js/umd.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/toaster-js/default.css\"/\u003e\n```\n\nAPI\n---\n\n+ [toast = new Toast(content, type, timeout)](#toastmessage-type-timeout)\n    + `Toast.TIME_SHORT` (2000 ms)\n    + `Toast.TIME_NORMAL` (4000 ms)\n    + `Toast.TIME_LONG` (8000 ms, default)\n    + `Toast.TYPE_INFO`\n    + `Toast.TYPE_MESSAGE`\n    + `Toast.TYPE_WARNING`\n    + `Toast.TYPE_ERROR`\n    + `Toast.TYPE_DONE`\n    + `toast.delete()` - Deletes this toast from the DOM.\n+ [configureToasts(options)](#configuretoastsoptions)\n    + `options.topOrigin = 0` - A `number` in pixels of toasts Y-axis origin (negative values move toasts up).\n    + `options.deleteDelay = 300` - A `number` representing delay in milliseconds. When toast is deleted, it stays in DOM for `deleteDelay` more milliseconds. Useful with CSS animations.\n+ `deleteAllToasts()` - Deletes all toasts on the screen.\n\n##### Toast(content, type, timeout)\n\nCreates a new toast notification message on the screen. Pass a string `content` to specify the \nmessage text, `type` = `Toast.TYPE_*` to specify the type and `timeout` = `Toast.TIME_*` to specify\nthe timeout. Timeout constants are the numbers of milliseconds for message to stay on screen. For \nexample, `new Toast(\"Baked!\", Toast.TYPE_ERROR, 10000)` message will stay on the screen for 10 \nseconds.\n\n+ `TIME_SHORT` = 2 seconds\n+ `TIME_NORMAL` = 4 seconds\n+ `TIME_LONG` = 8 seconds\n+ `TYPE_INFO` = `\"info\"`\n+ `TYPE_MESSAGE` = `\"message\"`\n+ `TYPE_WARNING` = `\"warning\"`\n+ `TYPE_ERROR` = `\"error\"`\n+ `TYPE_DONE` = `\"done\"`\n\nWhen `content` is a valid DOM `Element`, it will be attached to the message's body directly, \nallowing you to customize toast however you want.\n\n##### configureToasts(options)\n\nAllows to configure some options of the toast. The available optional options are listed below:\n\n```js\nconfigureToasts({\n    topOrigin: -100, // [default=0] Y-axis origin of the messages (better to use CSS `transform` instead).\n    deleteDelay: 300 // time until the toast is completely removed from the DOM after deleting. \n});\n```\n\nStyles\n------\n\nImport default toast styles from `node_modules/toaster-js/default.*css` (CSS, SCSS are available).\n\nTo style the toast properly, consider that toast elements (for example, `info` toasts) have three \nstates: empty state (when the toast attaches to the DOM), `displayed` state (when the toast is moved\nto its proper position), and `deleted` state, when the toast \"fades out\" from the DOM. You can \ncontrol how much time the toast stays in `deleted` state until it disappears using \n[deleteDelay](#api) option. States:\n\n```html\n\u003cdiv class=\"toast\"\u003e        \u003cdiv class=\"body warning\"\u003e...\u003c/div\u003e \u003c/div\u003e\n\u003cdiv class=\"toast displayed\"\u003e \u003cdiv class=\"body info\"\u003e...\u003c/div\u003e \u003c/div\u003e\n\u003cdiv class=\"toast deleted\"\u003e   \u003cdiv class=\"body done\"\u003e...\u003c/div\u003e \u003c/div\u003e\n```\n\nContributing\n------------\n\nFeel free to improve this project! Building the `umd.js` and `default.css` requires the following:\n\n```bash\nnpm install\nnpm run build\n```\n\nLicense\n-------\n\nMIT © [Nikita Savchenko](https://nikita.tk/developer)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikitaeverywhere%2Ftoaster-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikitaeverywhere%2Ftoaster-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikitaeverywhere%2Ftoaster-js/lists"}