{"id":15601884,"url":"https://github.com/codebender828/breadstick","last_synced_at":"2025-08-29T14:09:40.098Z","repository":{"id":36140302,"uuid":"220743488","full_name":"codebender828/breadstick","owner":"codebender828","description":"🥖A simple and flexible stacking, positioning \u0026 dismissal API for authored toast style notifications in Vue.js","archived":false,"fork":false,"pushed_at":"2022-12-11T12:45:49.000Z","size":3249,"stargazers_count":119,"open_issues_count":21,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T15:21:05.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://breadstick.netlify.com/","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/codebender828.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-10T04:58:07.000Z","updated_at":"2023-05-05T12:17:40.000Z","dependencies_parsed_at":"2022-08-26T18:10:35.142Z","dependency_job_id":null,"html_url":"https://github.com/codebender828/breadstick","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebender828","download_url":"https://codeload.github.com/codebender828/breadstick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767236,"owners_count":20992548,"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":[],"created_at":"2024-10-03T02:28:05.807Z","updated_at":"2025-04-08T03:11:49.766Z","avatar_url":"https://github.com/codebender828.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/dIlWof6x5"],"categories":["JavaScript","Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"🚀 A simple and flexible implementation of toast style notifications for Vue.js.\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimage src=\"https://res.cloudinary.com/xtellar/image/upload/v1573767816/breadstick/breadstick-logo_r6fnan.png\" width=\"150px\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eBreadstick\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eA simple and flexible implementation of toast style notifications for Vue.js.\u003c/h4\u003e\n\u003cp align=\"center\"\u003e🌟 Inspired by \u003ca target=\"_blank\" href=\"https://github.com/bmcmahen/toasted-notes\"\u003etoasted-notes\u003c/a\u003e for React - which I think is really cool. ❤️\u003c/p\u003e\n\n\u003ch4 align=\"center\"\u003e\u003ca href=\"https://breadstick.now.sh/\" target=\"_blank\"\u003eDemo\u003c/a\u003e\u003c/h4\u003e\n\n### 🌟 Features\n- **Functional Stacking, Positioning, Timing \u0026 Dismissal API.** Breadstick exposes a function that allows you to to control the stacking, positioning and dismissal of authored toast style notifications.\n- **Render whatever you want.** Utilize the render callback to create beautiful custom notifications.\n- **Functional default styles.** Import the provided css for some nice styling defaults or write your own styles.\n- **Vue framework-agnostic notification.** Breadstick is un-opininated about the styling of your Vue toast notifications. It's main strengths are in handling the business logic of stacking, positioning, timing \u0026 dismissal of your toast notifications.\n\n## 📚 Table of Contents\n  - [🥳 Breadstick Starters](#starters)\n  - [⚡️ Installation](#installation)\n    - [Installing with Nuxt](#installing-with-nuxt)\n  - [🤖 Examples](#examples)\n    - [🍊 Basic usage](#basic-usage)\n    - [📚 Using different positions](#different-positions)\n    - [🏠 Using custom element](#custom-notifications)\n    - [📭 Close all notifications](#close-all)\n  - [🏗 Advanced usage](#advanced)\n    - [🌮 With Vue's `render` function callback](#render-callback)\n    - [🚚 With JSX](#with-jsx)\n- [💼 API](#api)\n  - [`notify(String|VNode|Function, options)`](#notify)\n    - [Options](#options)\n  - [`closeAll()`](#close-all)\n- [🔖 TODO:](#todo)\n- [🤝 Contributing](#contributing)\n- [❤️ Support this project](#support)\n- [Contributors ✨](#contributors)\n\n\u003ca id=\"starters\"\u003e\u003c/a\u003e\n### 🥳 Breadstick Starters\nHere are a few Codesandbox starters you can use to get started with Breadstick in your Vue or Nuxt App.\n- **Vue.js Starter**: http://bit.ly/breadstick-vue\n- **Nuxt.js Starter**: http://bit.ly/breadstick-nuxt\n\n\u003ca id=\"installation\"\u003e\u003c/a\u003e\n### ⚡️ Installation\nInstall `breadstick` and its peer dependency, `animejs`, using yarn or npm.\n\n```bash\nnpm install breadstick animejs --save\n```\n\nYou can then register `BreadstickBakery` as a Vue plugin.\n```js\nimport Vue from 'vue'\nimport { BreadstickBakery } from 'breadstick'\n\n// This exposes `this.$breadstick` in your Vue template.\nVue.use(BreadstickBakery)\n```\n\n#### Installing with Nuxt\nAfter installing Breadstick, we import it and register it as a **client-side plugin**. This is because Breadstick it makes use of some DOM APIs. Code is similiar to the Vue plugin shown above.\n\n\n\u003ca id=\"examples\"\u003e\u003c/a\u003e\n\n### 🤖 Examples\nBreadstick can be used to render different types of notifications out of the box. You can render simple string notifications as well as custom styled notifications. This makes it really convenient.\n\n\u003ca id=\"basic-usage\"\u003e\u003c/a\u003e\n\n#### 🍊 Basic usage\nInvoke a notification using the `notify` method to display a message to the user.\nBreadstick defaults the notification duration to 5 seconds in the `top` position.\n\n```js\nthis.$breadstick.notify('🥞 Show me the pancakes')\n```\n\u003ca id=\"different-positions\"\u003e\u003c/a\u003e\n\n#### 📚 Using different positions\nYou can display notifications in different positions, including top-left, top, top-right, bottom-left, bottom, and bottom-right.\n\n```js\n[\n  'top-left', \n  'top', \n  'top-right', \n  'bottom-left', \n  'bottom', \n  'bottom-right'\n].forEach(position =\u003e {\n  this.$breadstick.notify(\"Using position \" + position, {\n    position\n  })\n})\n```\n\n\u003ca id=\"custom-notifications\"\u003e\u003c/a\u003e\n\n#### 🏠 Using custom element\nWith JSX or Vue's render function, breadstick is able to render a custom element or Vue component\n\n```jsx\nthis.$breadstick.notify(\n  \u003cdiv\u003eI am a custom HTML element\u003c/div\u003e\n)\n```\n\n\u003ca id=\"close-all\"\u003e\u003c/a\u003e\n\n#### 📭 Close all notifications\nYou can clear all notifications by calling breadstick's `closeAll` method\n\n```jsx\nthis.$breadstick.closeAll()\n```\n\n\u003ca id=\"advanced\"\u003e\u003c/a\u003e\n\n### 🏗 Advanced usage\nWhereas breadstick shines in making simple notifications for your Vue app, it's real strength is shown in allowing you to create custom notifications through it's render function callback.\n\nThis is particularly useful if you want use custom themed elements or Vue components inside of your toast notification. In the following snippet, we render a custom `Alert` component to display a toast notification.\n\nThis is particularly useful for building your own themed notification component library.\n\n[Here is an advanced examples](https://github.com/codebender828/breadstick-examples) of how to use breadstick to render you own authored toast notifications.\n\n\u003ca id=\"render-callback\"\u003e\u003c/a\u003e\n\n#### 🌮 With Vue's `render` function callback\nBreadstick exposes Vue's `createElement` function in the render callback that you can use to render your own components in a toast notification. This can be useful in a context where Vue's `this` context may not be available.\n\nIn a Vue component, you can even use that component's `this.$createElement` to render your own element/component and return it in the render function callback so breadstick can display it.\n\n```js\n// Import your custom `Alert` component and render it in breadstick\nimport Alert from './components/Alert'\n\nexport default {\n  mounted () {\n    this.$breadstick.notify(({ h, onClose }) =\u003e {\n      return h(Alert, {\n        on: {\n          click: onClose\n        }\n      }, 'A render function Alert notification')\n    })\n  }\n}\n```\n\n\u003ca id=\"with-jsx\"\u003e\u003c/a\u003e\n\n#### 🚚 With JSX\nYou can also use JSX if you like :).\n```jsx\n// Import your custom `Alert` component and render it in breadstick\nimport Alert from './components/Alert'\n\nexport default {\n  mounted () {\n    breadstick.notify(({ onClose }) =\u003e {\n      return (\n        \u003cAlert onClick={onClose}\u003e\n          An JSX Alert notification\n        \u003c/Alert\u003e\n      )\n    }\n  }\n}\n```\n\n\u003ca id=\"api\"\u003e\u003c/a\u003e\n\n## 💼 API\n\n\u003ca id=\"notify\"\u003e\u003c/a\u003e\n\n### `notify(String|VNode|Function, options)` \n - **Arguments**\n   - `{ String | VNode | Function }` Message\n   - `{ Object }` options\n\nBreadstick's `notify` method accepts two parameters. The first parameter can be a `String`, `VNode` (Object), or `Function` and the second is the options object.\n\nIf a string is passed in the first argument, breadstick will render a notificiation with the string in the top center position with it's default internal component.\n```js\nthis.$breadstick.notify('Simple notification.')\n```\n\nIf a `VNode` is passed, Breadstick treats it like a rendered component and renders it instead.\n```jsx\nthis.$breadstick.notify(\n  \u003cdiv\u003eI am a custom HTML element\u003c/div\u003e\n)\n```\n\nIf a callback `Function` is passed in the first argument, it will expose an object with two parameters: `h` and the `onClose` which are both functions. Using a render callback allows you to tap into the close function. It's your best option if you want to completely re-style your toast notification\n\n```js\nthis.$breadstick.notify(({ h, onClose }) =\u003e {\n  return h('div', 'My custom notification')\n})\n```\n\u003ca href=\"options\"\u003e\u003c/a\u003e\n\n#### Options\nOption | Type | Default | Values\n--- | --- | --- | --\n`position` | `String` | `top` | `top`, `right`, `bottom`, `left`, `top-left`, `top-right`, `bottom-right`, `bottom-left`\n`duration` | `Number` | 5000 | Any number in milliseconds\n\n\u003ca id=\"close-all\"\u003e\u003c/a\u003e\n\n### `closeAll()`\n - Type: `Function`\nThe `closeAll` method closes all toast notifications that are visible in the UI at the time of invocation. Nice a succinct way to dismiss all notifications\n\n\u003ca id=\"todo\"\u003e\u003c/a\u003e\n\n## 🔖 TODO:\nBreadstick still has a few more features coming up. These include:\n- [ ] Indefinitely display toast notification\n- [ ] Allow sharing of same application Vue instance.\n\n\u003ca id=\"contributing\"\u003e\u003c/a\u003e\n\n## 🤝 Contributing\nHere's our contribution [guide.](./.github/CONTRIBUTING.md)\n\n\u003ca id=\"support\"\u003e\u003c/a\u003e\n\n## ❤️ Support this project\nIf you like this project, please consider supporting it by buying my a coffee!\n\n\u003ca target=\"_blank\" href=\"https://www.buymeacoffee.com/dIlWof6x5\"\u003e\n  \u003cimg width=\"200px\" src=\"https://res.cloudinary.com/xtellar/image/upload/v1584764609/jbakebwa.dev/sponsorships/buy-me-a-coffee.png\" alt=\"Buy me a coffee\"\u003e\n\u003c/a\u003e\n\n\u003ccenter\u003e\n  \u003cbr\u003e\n  Made with ❤️ by \u003ca target=\"_blank\" href=\"https://twitter.com/codebender828\"\u003eJonathan Bakebwa 🇺🇬\u003c/a\u003e\n\u003c/center\u003e\n\n\u003ca id=\"contributors\"\u003e\u003c/a\u003e\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://jbakebwa.dev\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/21237954?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonathan Bakebwa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/codebender828/breadstick/commits?author=codebender828\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/codebender828/breadstick/commits?author=codebender828\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://bit.ly/becomeworldclass\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/24433274?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOmereshone Kelvin Oghenerhoro\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/codebender828/breadstick/commits?author=DominusKelvin\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fbreadstick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebender828%2Fbreadstick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fbreadstick/lists"}