{"id":13409136,"url":"https://github.com/rfoel/bulma-toast","last_synced_at":"2025-04-04T16:16:42.219Z","repository":{"id":32520608,"uuid":"132802094","full_name":"rfoel/bulma-toast","owner":"rfoel","description":"Bulma's pure JavaScript extension to display toasts","archived":false,"fork":false,"pushed_at":"2024-03-02T13:06:11.000Z","size":2872,"stargazers_count":169,"open_issues_count":21,"forks_count":30,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T15:09:58.427Z","etag":null,"topics":["bulma","bulma-toast","hacktoberfest","javacript","toast"],"latest_commit_sha":null,"homepage":"https://rfoel.github.io/bulma-toast/","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/rfoel.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":["rfoel"],"patreon":"rfoel","open_collective":"rfoel","ko_fi":"rfoel"}},"created_at":"2018-05-09T19:11:55.000Z","updated_at":"2024-12-12T10:07:41.000Z","dependencies_parsed_at":"2024-01-14T04:00:02.061Z","dependency_job_id":"a58671a5-1ea5-4c8b-812a-196bf19d0bdc","html_url":"https://github.com/rfoel/bulma-toast","commit_stats":{"total_commits":128,"total_committers":22,"mean_commits":5.818181818181818,"dds":0.390625,"last_synced_commit":"473b3fbceaae5e7286e01a689b13eeaf33445d28"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfoel%2Fbulma-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfoel%2Fbulma-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfoel%2Fbulma-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rfoel%2Fbulma-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rfoel","download_url":"https://codeload.github.com/rfoel/bulma-toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208183,"owners_count":20901570,"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":["bulma","bulma-toast","hacktoberfest","javacript","toast"],"created_at":"2024-07-30T20:00:58.270Z","updated_at":"2025-04-04T16:16:42.187Z","avatar_url":"https://github.com/rfoel.png","language":"JavaScript","funding_links":["https://github.com/sponsors/rfoel","https://patreon.com/rfoel","https://opencollective.com/rfoel","https://ko-fi.com/rfoel"],"categories":["Extensions","JavaScript"],"sub_categories":["Courses"],"readme":"# bulma-toast\n\n[![npm version](https://badge.fury.io/js/bulma-toast.svg)](https://badge.fury.io/js/bulma-toast)\n![Publish](https://github.com/rfoel/bulma-toast/workflows/Publish/badge.svg)\n\nBulma's pure JavaScript extension to display toasts. Basically a Bulma's [notification](https://bulma.io/documentation/elements/notification) implemented as a toast plugin.\n\n[Demo](https://rfoel.github.io/bulma-toast/)\n\n![Bulma Toast](https://raw.githubusercontent.com/rfoel/bulma-toast/master/bulma-toast.png)\n\n## Options\n\nThe plugin comes with the following options:\n\n- `message`: The actual message to be displayed. It can be a string, a template string, or a DOM node. [See examples](#examples). This is **required**.\n- `type`: Essentially a Bulma's css class. It can be `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, or any other custom class. Default is a whitesmoke background with dark text as shown [here](https://bulma.io/documentation/elements/notification).\n- `duration`: Duration of the notification in milliseconds. Default is `2000` milliseconds.\n- `position`: Position where the notification will be shown. The default is `top-right`, so if you want it to be on the top-left just add `top-left` to this option. The available options are: `top-left`, `top-center`, `top-right`, `center`, `bottom-left`, `bottom-center`, and `bottom-right`.\n- `dismissible`: Whether the notification will have a close button or not. Default is `false`.\n- `pauseOnHover`: Pauses delay when hovering the notification. Default is `false`.\n- `single`: Only show a single toast in `appendTo`. Default is `false`.\n- `closeOnClick`: Dismisses the notification when clicked. Default is `true`.\n- `opacity`: The notification's container opacity. Default is `1`.\n- `animate`: [See here](#animate). Default is no animations.\n- `appendTo`: By default, the notification will be appended to [`document.body`](https://developer.mozilla.org/en-US/docs/Web/API/Document/body). Pass a different [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) to have it appended else where in the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).\n- `extraClasses`: Adds classes for styling the toast notification.\n## Install\n\n```\n  npm install bulma-toast\n```\n\nor\n\n```\n  yarn add bulma-toast\n```\n\n## Quick Start\n\n1.  Link to bulma-toast.min.js\n\n```html\n\u003cscript src=\"bulma-toast.min.js\"\u003e\u003c/script\u003e\n```\n\n2.  Use bulma-toast to display a toast\n\n```js\nbulmaToast.toast({ message: 'Hello There' })\nbulmaToast.toast({ message: 'General Kenobi', type: 'is-danger' })\n```\n\n## ES Modules\n\n```js\n// Import the toast function\nimport * as bulmaToast from 'bulma-toast'\n// Or use\n// import { toast as superToast } from 'bulma-toast'\n// to rename your import\n\ntoast({\n  message: 'Hello There',\n  type: 'is-success',\n  dismissible: true,\n  animate: { in: 'fadeIn', out: 'fadeOut' },\n})\n```\n\n## Default config\n\nA simple default object to prevent errors. Your options will be merged with these and the defaults will be used if the fields are not provided.\n\n```json\n{\n  \"duration\": 2000,\n  \"position\": \"top-right\",\n  \"closeOnClick\": true,\n  \"opacity\": 1,\n  \"single\": false,\n  \"offsetTop\": 0,\n  \"offsetBottom\": 0,\n  \"offsetLeft\": 0,\n  \"offsetRight\": 0\n}\n```\n\nThe default config can be updated using the funcion `setDefaults`. Also, it's possible to reset to the default config using `resetDefaults`\n\n```js\nbulmaToast.setDefaults({\n  duration: 1000,\n  position: 'top-left',\n  closeOnClick: false,\n})\n```\n\n## Change document context\n\n```js\nbulmaToast.setDoc(window.document)\n```\n\nThis can be changed before each toast call and can be set to eny element.\n\n## Animate\n\nBulma Toast supports [animate.css](https://daneden.github.io/animate.css/) (and maybe others?). You MUST include [animate.css](https://daneden.github.io/animate.css/) on your document's `\u003chead\u003e`\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"animate.min.css\" /\u003e\n  \u003c!-- or --\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"https://cdn.jsdelivr.net/npm/animate.css@4.0.0/animate.min.css\"\n  /\u003e\n  \u003c!-- or --\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css\"\n  /\u003e\n\u003c/head\u003e\n```\n\nAccepts a object with `in` and `out` with css classes to add animations. Using Animate.css you would pass a object like this:\n\n```js\n  {\n    message: \"I'm animated! Yay!\",\n    duration: 2000,\n    position: \"top-right\",\n    animate: { in: 'fadeIn', out: 'fadeOut' }\n  }\n```\n\n_Warning_: Don't use `opacity` when using animations. Some of them use the opacity property like fade in and fade out.\n\n## Examples\n\n```js\nimport { toast } from 'bulma-toast'\n\ntoast({\n  message: 'Hello There',\n  type: 'is-success',\n  dismissible: true,\n  pauseOnHover: true,\n})\n\ntoast({\n  message: '\u003ch1\u003eLOOK HERE\u003c/h1\u003e',\n  type: 'is-danger',\n  dismissible: true,\n  pauseOnHover: true,\n  animate: { in: 'fadeIn', out: 'fadeOut' },\n})\n\nconst myMessage = `It's ${new Date().toDateString()}`\n\ntoast({\n  message: myMessage,\n  type: 'is-primary',\n  position: 'center',\n  closeOnClick: true,\n  pauseOnHover: true,\n  opacity: 0.8,\n})\n\nconst elm = document.createElement('a')\nelm.text = 'Visit my website!'\nelm.href = 'https://rfoel.com'\n\ntoast({\n  message: elm,\n  type: 'is-warning',\n  position: 'center',\n  closeOnClick: true,\n  pauseOnHover: true,\n  animate: { in: 'fadeIn', out: 'fadeOut' },\n})\n```\n\n## Contributing\n\nIssues and pull requests are welcome.\n\n## License\n\n[MIT](https://github.com/rfoell/bulma-toast/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frfoel%2Fbulma-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frfoel%2Fbulma-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frfoel%2Fbulma-toast/lists"}