{"id":13461325,"url":"https://github.com/Cogoport/cogo-toast","last_synced_at":"2025-03-24T22:34:32.916Z","repository":{"id":33113052,"uuid":"150962034","full_name":"Cogoport/cogo-toast","owner":"Cogoport","description":"Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons","archived":true,"fork":true,"pushed_at":"2022-12-07T08:40:12.000Z","size":11093,"stargazers_count":673,"open_issues_count":21,"forks_count":1,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-11T19:09:14.068Z","etag":null,"topics":["cogo-toast","messages","notifications","react","react-toast","toast","toast-message","toast-messages"],"latest_commit_sha":null,"homepage":"https://cogoport.github.io/cogo-toast","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tabrez96/cogo-toast","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cogoport.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-30T11:38:49.000Z","updated_at":"2024-06-07T17:35:03.000Z","dependencies_parsed_at":"2023-01-14T23:30:17.701Z","dependency_job_id":null,"html_url":"https://github.com/Cogoport/cogo-toast","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cogoport%2Fcogo-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cogoport%2Fcogo-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cogoport%2Fcogo-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cogoport%2Fcogo-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cogoport","download_url":"https://codeload.github.com/Cogoport/cogo-toast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222019225,"owners_count":16917276,"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":["cogo-toast","messages","notifications","react","react-toast","toast","toast-message","toast-messages"],"created_at":"2024-07-31T11:00:34.486Z","updated_at":"2024-10-29T08:30:34.381Z","avatar_url":"https://github.com/Cogoport.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Components","目录","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Notification"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://cogoport.github.io/cogo-toast/\" target=\"_blank\"\u003e\u003cimg src=\"https://cogoport.github.io/cogo-toast/meta/android-chrome-96x96.png\" alt=\"cogo-toast\" title=\"cogo-toast\" width=\"120\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eCogo Toast\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eBeautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons)\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://cogoport.github.io/cogo-toast/\"\u003ehttps://cogoport.github.io/cogo-toast/\u003c/a\u003e\u003c/p\u003e\n\n[![Dependencies](https://img.shields.io/david/Cogoport/cogo-toast.svg)](https://david-dm.org/Cogoport/cogo-toast.svg)\n[![npm package](https://img.shields.io/npm/v/cogo-toast/latest.svg)](https://www.npmjs.com/package/cogo-toast)\n[![Small size](https://img.badgesize.io/https://unpkg.com/cogo-toast/dist/index.js?compression=gzip)](https://unpkg.com/cogo-toast/dist/index.js)\n[![npm downloads](https://img.shields.io/npm/dm/cogo-toast.svg)](https://www.npmjs.com/package/cogo-toast)\n![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)\n[![License](https://img.shields.io/npm/l/@xstyled/styled-components.svg)](https://github.com/Cogoport/cogo-toast/blob/master/LICENSE)\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://cogoport.github.io/cogo-toast/\" target=\"_blank\"\u003e\u003cimg src=\"docs/public/images/preview.gif\" alt=\"cogo-toast-preview\" title=\"cogo-toast-preview\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Install via NPM:\n\n```bash\nnpm install --save cogo-toast\n```\n\n### Install via Yarn:\n\n```bash\nyarn add cogo-toast\n```\n\n#### Note:\n\nThe latest version `^3.0.0` makes the use of React Hooks internally.\n\nTo use this package in projects that don't support hooks, use `v2.0.1` instead.\n\n```bash\nyarn add cogo-toast@2.0.1\n```\n\n## Usage\n\nIts Plug and Play. No configuration required. Just import and you are good to go.\n\n```javascript\nimport cogoToast from 'cogo-toast';\n\ncogoToast.success('This is a success message!');\n```\n\n### 5 Built in Types\n\nThere are 5 built-in types to handle the most common cases in any application.\n\n```javascript\ncogoToast.success('This is a success message');\n\ncogoToast.info('This is a info message');\n\ncogoToast.loading('This is a loading message');\n\ncogoToast.warn('This is a warn message');\n\ncogoToast.error('This is a error message');\n```\n\n### Use JSX\n\n**cogoToast** is built using React. Which means any valid jsx can be used as the message in cogoToast\n\n```javascript\ncogoToast.info(\n  \u003cdiv\u003e\n    \u003cb\u003eAwesome!\u003c/b\u003e\n    \u003cdiv\u003eIsn't it?\u003c/div\u003e\n  \u003c/div\u003e,\n);\n```\n\n### Returns a Promise\n\nReturns a promise which resolves when the toast is about to hide.\n\nThis can be useful to do some action when the toast has completed showing.\n\n```javascript\ncogoToast.loading('Loading your data...').then(() =\u003e {\n  cogoToast.success('Data Successfully Loaded');\n});\n```\n\n### Hide on Click\n\n```javascript\nconst { hide } = cogoToast.success('This is a success message.', {\n  onClick: () =\u003e {\n    hide();\n  },\n});\n```\n\n### Completely Customizable\n\nThe second parameter to the function is an options object that can be passed in for customization.\n\n```javascript\ncogoToast.info('This is an info message', options);\n```\n\n#### All Available Options\n\nHere's a list of all the available options, to customize the toast to your needs.\n\n|    Options    |                                               Type                                               |                          Default                           |\n| :-----------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------------------: |\n|   hideAfter   |                                        Number in Seconds                                         | `3` \u003cbr /\u003e(Can be `0` to disable auto-hiding of the toast) |\n|   position    | `'top-left', 'top-center', 'top-right',` \u003cbr /\u003e `'bottom-left', 'bottom-center', 'bottom-right'` |                       `'top-center'`                       |\n|    heading    |                                              String                                              |                            `''`                            |\n|  renderIcon   |                                       Function\u003cReactNode\u003e                                        |                   Icon Based on the Type                   |\n|      bar      |           Object \u003cbr /\u003e `{ size: '2px', style: 'solid/dashed/dotted', color: '#hex' }`           |                     Based on the Type                      |\n| onClick() |                                             Function                                             |                           `null`                           |\n| role |                                             aria-role                                             |                           `status`                           |\n| toastContainerID |                   The dom element in which the toast container is added                                         |                           `ct-container`                           |\n\n### Custom Styling\n\nYou can provide your own custom styling by extending the `ct-toast` class in your css styles.\n\nFor all classnames, refer to [/src/styles/styles.css](/src/styles/styles.css)\n\n#### Customize each type of Toast seperately\n\nCustomize each type of Toast seperately, by extending the `ct-toast-\u003ctype\u003e` class. For example, in your CSS,\n\n```\nct-toast-success {\n  color: #FFFFFF;\n  background: #6EC05F;\n}\n```\n\n### Only ~ 4kb gzip (with Styles and Icons)\n\nThe package contains the minified build file, along with the SVG Icons and the Styles, built into the Code, with a total of only ~4kb gzip.\n\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://github.com/anmdotdev\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/36692003?v=4\" width=\"100px;\" alt=\"Anmol Mahatpurkar\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnmol Mahatpurkar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=anmolmahatpurkar\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-anmolmahatpurkar\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=anmolmahatpurkar\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://balazsorban.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/18369201?v=4\" width=\"100px;\" alt=\"Balázs Orbán\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBalázs Orbán\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=balazsorban44\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Keaws\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5289466?v=4\" width=\"100px;\" alt=\"Vitalii Kalchuk\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVitalii Kalchuk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=Keaws\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.apathak.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/24917309?v=4\" width=\"100px;\" alt=\"Amar Pathak\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAmar Pathak\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=amarpathak\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nataly87s\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/7895237?s=460\u0026v=4\" width=\"100px;\" alt=\"Nataly Shrits\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNataly Shrits\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Cogoport/cogo-toast/commits?author=nataly87s\" title=\"Code\"\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%2FCogoport%2Fcogo-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCogoport%2Fcogo-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCogoport%2Fcogo-toast/lists"}