{"id":13998444,"url":"https://github.com/ardeora/solid-toast","last_synced_at":"2025-07-23T06:31:40.575Z","repository":{"id":37033996,"uuid":"494169702","full_name":"ardeora/solid-toast","owner":"ardeora","description":"Customizable Toast Notifications for SolidJS","archived":false,"fork":false,"pushed_at":"2024-02-12T03:38:09.000Z","size":383,"stargazers_count":893,"open_issues_count":17,"forks_count":25,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-29T04:08:13.814Z","etag":null,"topics":["notifications","solid-js","toast"],"latest_commit_sha":null,"homepage":"https://www.solid-toast.com","language":"TypeScript","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/ardeora.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-19T17:34:18.000Z","updated_at":"2025-06-27T10:27:34.000Z","dependencies_parsed_at":"2024-01-15T19:44:41.830Z","dependency_job_id":"efce2f6f-9829-408a-943e-838c7410f30d","html_url":"https://github.com/ardeora/solid-toast","commit_stats":{"total_commits":94,"total_committers":5,"mean_commits":18.8,"dds":0.3936170212765957,"last_synced_commit":"57929fa702fa775b7437cdd8c1830eb75cf1bff6"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/ardeora/solid-toast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardeora%2Fsolid-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardeora%2Fsolid-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardeora%2Fsolid-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardeora%2Fsolid-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ardeora","download_url":"https://codeload.github.com/ardeora/solid-toast/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardeora%2Fsolid-toast/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266631348,"owners_count":23959419,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["notifications","solid-js","toast"],"created_at":"2024-08-09T19:01:40.694Z","updated_at":"2025-07-23T06:31:40.168Z","avatar_url":"https://github.com/ardeora.png","language":"TypeScript","readme":"\u003ca href=\"https://github.com/ardeora/solid-toast\"\u003e\u003cimg alt=\"Solid Toast header image showing a cute toaster with a toast popping out\" src=\"https://github.com/ardeora/solid-toast/raw/main/assets/header.png\"/\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/solid-toast\" alt=\"NPM Version\" /\u003e\n    \u003ca href=\"https://bundlephobia.com/package/solid-toast\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Bundle%20Size-4kb-brightgreen\" alt=\"minzipped size\"/\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://github.com/ardeora/solid-toast/workflows/build/badge.svg\" alt=\"Build Status\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\u003cstrong\u003eCreate beautiful, customizable toasts in SolidJS.\u003c/strong\u003e\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\" \u003e\n\u003ca  href=\"https://stackblitz.com/edit/vitejs-vite-njwzfq?file=src/App.tsx\"\u003eStackBlitz Demo\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Features\n\n- **Easily Customizable**\n- **Promise API**\n- **Lightweight**\n- **Accessible**\n- **SSR Support**\n\n## Installation\n\n#### With yarn\n\n```sh\nyarn add solid-toast\n```\n\n#### With NPM\n\n```sh\nnpm install solid-toast\n```\n\n## Getting Started\n\nAdd a Toaster to your component tree. This component will render all toasts. Now you can trigger `toast()` from anywhere!\n\n```jsx\nimport toast, { Toaster } from 'solid-toast';\n\nconst notify = () =\u003e toast('Here is your toast.');\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={notify}\u003eMake me a toast\u003c/button\u003e\n      \u003cToaster /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Documentation\n\n### `toast()` Function\n\nCall this function from anywhere to create a toast.\n\n#### Available Options\n\nYou can provide `ToastOptions` as the second argument. They will overwrite all options received from the `\u003cToaster/\u003e` component.\n\n```js\ntoast('This is a simple toast!', {\n  duration: 5000,\n  position: 'top-right',\n  // Add a delay before the toast is removed\n  // This can be used to time the toast exit animation\n  unmountDelay: 500,\n  // Styling - Supports CSS Objects, classes, and inline styles\n  // Will be applied to the toast container\n  style: {\n    'background-color': '#f00',\n  },\n  className: 'my-custom-class',\n  // Custom Icon - Supports text as well as JSX Elements\n  icon: '🍩',\n  // Set accent colors for default icons that ship with Solid Toast\n  iconTheme: {\n    primary: '#fff',\n    secondary: '#000',\n  },\n  // Aria Props - Supports all ARIA props\n  aria: {\n    role: 'status',\n    'aria-live': 'polite',\n  },\n});\n```\n\n#### Creating Toasts\n\nThere are several options for creating toasts\n\n##### Blank\n\n```js\ntoast('This is a blank toast!');\n```\n\nBlank toasts do not come with a default icon. However, you can set a custom JSX Element/Text (Emoji) icon by placing it in the `icon` option.\n\n##### Success\n\n```js\ntoast.success('Successfully saved!');\n```\n\nCreates a notification with an animated checkmark. Color accents can be themed with the `iconTheme` option.\n\n##### Error\n\n```js\ntoast.error('Something went wrong!');\n```\n\nCreates a notification with an animated error icon. Color accents can be themed with the `iconTheme` option.\n\n##### Loading\n\n```js\ntoast.loading('Loading Photos...');\n```\n\nShows a toast with a loading indicator icon. The content can later be updated with an error or success icon. See how to update the toast content [here](#updating-toasts).\n\n##### Promise\n\nThe `promise()` function can be used to create a toast from a promise. This function will automatically show a loading icon and update the toast with the result of the promise.\n\n```jsx\nconst myPromise = fetchData();\n\ntoast.promise(myPromise, {\n  loading: 'Loading',\n  success: \u003cb\u003eGot the data\u003c/b\u003e,\n  error: 'An error occurred 😔',\n});\n```\n\n##### Custom Toast\n\nYou also have the ability to completely customize the appearance of your toast.\nA custom JSX Element can be passed in like so:\n\n```jsx\ntoast.custom(() =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eCustom Toast\u003c/h1\u003e\n    \u003cp\u003eThis is a custom toast!\u003c/p\u003e\n  \u003c/div\u003e\n));\n```\n\n###### Advanced Option\n\nYou can also hook into the toast life-cycle by adding a parameter to the JSX Function call like so:\n\n```jsx\ntoast.custom(\n  (t) =\u003e (\n    \u003cdiv\u003e\n      \u003ch1\u003eCustom Toast\u003c/h1\u003e\n      \u003cp\u003eThis is a custom toast!\u003c/p\u003e\n      \u003cp\u003e{t.visible ? 'Showing' : 'I will close in 1 second'}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e toast.dismiss(t.id)}\u003eClose Toast\u003c/button\u003e\n    \u003c/div\u003e;\n  ),\n  {\n    unmountDelay: 1000,\n  }\n);\n```\n\n#### Helpful Utilities\n\n##### Dismiss Toasts Programatically\n\nYou can manually dismiss a notification with `toast.dismiss`. Beware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 500ms by default. You can adjust the dismiss duration with the `unmountDelay` option.\n\n###### Dismiss Single Toast\n\n```js\nconst toastId = toast.loading('Loading...');\n// ...\ntoast.dismiss(toastId);\n```\n\nDismiss all toasts by omitting all arguments.\n\n###### Dismiss All Toasts\n\n```js\ntoast.dismiss();\n```\n\n##### Remove Toasts Instantly\n\nToasts can be removed instantly with toast.remove. This will not trigger the exit animation and remove the toast instantly.\n\n```js\ntoast.remove(toastId);\n// or\ntoast.remove();\n```\n\n##### Updating Toasts\n\nEach toast call returns a unique id. Use this `id` in the toast options to update an existing toast.\n\n```js\nconst toastId = toast.loading('Loading...');\n// ...\ntoast.success('This worked', {\n  id: toastId,\n});\n```\n\n### `Toaster` Component\n\nThis component will render all toasts.\n\n#### Available Options\n\n```jsx\n\u003cToaster\n  position=\"top-center\"\n  // Spacing between each toast in pixels\n  gutter={8}\n  containerClassName=\"\"\n  containerStyle={{}}\n  toastOptions={{\n    // Define default options that each toast will inherit. Will be overwritten by individual toast options\n    className: '',\n    duration: 5000,\n    style: {\n      background: '#363636',\n      color: '#fff',\n    },\n  }}\n/\u003e\n```\n\n## Acknowledgements\n\nThis project is inspired by\n\n- [React Hot Toast](https://github.com/timolins/react-hot-toast)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fardeora%2Fsolid-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fardeora%2Fsolid-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fardeora%2Fsolid-toast/lists"}