{"id":13392529,"url":"https://github.com/t4t5/sweetalert","last_synced_at":"2025-05-12T03:43:08.411Z","repository":{"id":21318547,"uuid":"24635156","full_name":"t4t5/sweetalert","owner":"t4t5","description":"A beautiful replacement for JavaScript's \"alert\"","archived":false,"fork":false,"pushed_at":"2023-04-15T22:54:03.000Z","size":5478,"stargazers_count":22393,"open_issues_count":198,"forks_count":2820,"subscribers_count":448,"default_branch":"master","last_synced_at":"2025-04-29T22:22:52.744Z","etag":null,"topics":["alert","dialog","javascript","modal","popup","sweetalert","ui"],"latest_commit_sha":null,"homepage":"https://sweetalert.js.org","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/t4t5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-09-30T11:12:48.000Z","updated_at":"2025-04-28T06:55:20.000Z","dependencies_parsed_at":"2022-07-12T15:18:01.653Z","dependency_job_id":"98ff6d3e-cbe2-4267-a0c6-105acdff5675","html_url":"https://github.com/t4t5/sweetalert","commit_stats":{"total_commits":257,"total_committers":72,"mean_commits":"3.5694444444444446","dds":"0.47859922178988323","last_synced_commit":"d927c9bbc66bd26380dc360a71e1876d284a7faf"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fsweetalert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fsweetalert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fsweetalert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t4t5%2Fsweetalert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t4t5","download_url":"https://codeload.github.com/t4t5/sweetalert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251740721,"owners_count":21636113,"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":["alert","dialog","javascript","modal","popup","sweetalert","ui"],"created_at":"2024-07-30T17:00:26.728Z","updated_at":"2025-04-30T16:24:02.356Z","avatar_url":"https://github.com/t4t5.png","language":"TypeScript","funding_links":["https://opencollective.com/SweetAlert"],"categories":["JavaScript","Uncategorized","TypeScript","Web 前端","css","前端开发框架及项目","Modals and Popups","Alert","Modals and Popups [🔝](#readme)","19. 通知组件/弹框组件/模态窗口 ##","ui","模态框和弹出框","19. 通知组件/弹框组件/模态窗口","Table of Contents","Animation","Javascript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Uncategorized","其他_文本生成、文本对话","Other","Save","13.20 视差滚动(Parallax Scrolling) ###","其它","13.20 视差滚动(Parallax Scrolling)","jQuery plugins","Presentational Components","Modals and Popups"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://sweetalert.js.org\"\u003e\n    \u003cimg alt=\"SweetAlert\" src=\"https://raw.githubusercontent.com/t4t5/sweetalert/e3c2085473a0eb5a6b022e43eb22e746380bb955/assets/logotype.png\" width=\"300\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A beautiful replacement for JavaScript's \"alert\"\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/sweetalert\"\u003e\u003cimg src=\"https://badge.fury.io/js/sweetalert.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/t4t5/sweetalert\"\u003e\u003cimg src=\"https://travis-ci.org/t4t5/sweetalert.svg\" alt=\"Build status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/sweetalert\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/sweetalert.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/t4t5/sweetalert/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/t4t5/sweetalert.svg\" /\u003e\n  \u003c/a\u003e \n  \u003ca href=\"#backers\" alt=\"sponsors on Open Collective\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/backers/badge.svg\" /\u003e\u003c/a\u003e \u003ca href=\"#sponsors\" alt=\"Sponsors on Open Collective\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsors/badge.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"A success modal\" src=\"https://raw.githubusercontent.com/t4t5/sweetalert/e3c2085473a0eb5a6b022e43eb22e746380bb955/assets/swal.gif\"\u003e\n\u003c/p\u003e\n\n\n## Installation\n\n```bash\n$ npm install --save sweetalert\n```\n\n## Usage\n\n```javascript\nimport swal from 'sweetalert';\n\nswal(\"Hello world!\");\n```\n\n## Upgrading from 1.X\n\nMany improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the [upgrade guide](https://sweetalert.js.org/guides/#upgrading-from-1x) to avoid nasty surprises!\n\n## Guides\n\n- [Installation](https://sweetalert.js.org/guides/#installation)\n- [Getting started](https://sweetalert.js.org/guides/#getting-started)\n- [Advanced examples](https://sweetalert.js.org/guides/#advanced-examples)\n- [Using with libraries](https://sweetalert.js.org/guides/#using-with-libraries)\n- [Upgrading from 1.X](https://sweetalert.js.org/guides/#upgrading-from-1x)\n\n## Documentation\n\n- [Configuration](https://sweetalert.js.org/docs/#configuration)\n- [Methods](https://sweetalert.js.org/docs/#methods)\n- [Theming](https://sweetalert.js.org/docs/#theming)\n\n## Examples\n\n### An error message:\n```javascript\nswal(\"Oops!\", \"Something went wrong!\", \"error\");\n```\n\n### A warning message, with a function attached to the confirm message:\n  - Using promises:\n  ```javascript\n  swal({\n    title: \"Are you sure?\",\n    text: \"Are you sure that you want to leave this page?\",\n    icon: \"warning\",\n    dangerMode: true,\n  })\n  .then(willDelete =\u003e {\n    if (willDelete) {\n      swal(\"Deleted!\", \"Your imaginary file has been deleted!\", \"success\");\n    }\n  });\n  ```\n  - Using async/await:\n  ```javascript\n  const willDelete = await swal({\n    title: \"Are you sure?\",\n    text: \"Are you sure that you want to delete this file?\",\n    icon: \"warning\",\n    dangerMode: true,\n  });\n\n  if (willDelete) {\n    swal(\"Deleted!\", \"Your imaginary file has been deleted!\", \"success\");\n  }\n  ```\n  \n### A prompt modal, where the user's input is logged:\n  - Using promises:\n  ```javascript\n  swal(\"Type something:\", {\n    content: \"input\",\n  })\n  .then((value) =\u003e {\n    swal(`You typed: ${value}`);\n  });\n  ```\n  - Using async/await:\n  ```javascript\n  const value = await swal(\"Type something:\", {\n    content: \"input\",\n  });\n\n  swal(`You typed: ${value}`);\n  ```\n\n### In combination with Fetch:\n  - Using promises:\n  ```javascript\n  swal({\n    text: \"Wanna log some information about Bulbasaur?\",\n    button: {\n      text: \"Search!\",\n      closeModal: false,\n    },\n  })\n  .then(willSearch =\u003e {\n    if (willSearch) {\n      return fetch(\"http://pokeapi.co/api/v2/pokemon/1\");\n    }\n  })\n  .then(result =\u003e result.json())\n  .then(json =\u003e console.log(json))\n  .catch(err =\u003e {\n    swal(\"Oops!\", \"Seems like we couldn't fetch the info\", \"error\");\n  });\n  ```\n  - Using async/await:\n  ```javascript\n  const willSearch = await swal({\n    text: \"Wanna log some information about Bulbasaur?\",\n    button: {\n      text: \"Search!\",\n      closeModal: false,\n    },\n  });\n  \n  if (willSearch) {\n    try {\n      const result = await fetch(\"http://pokeapi.co/api/v2/pokemon/1\");\n      const json = await result.json();\n      console.log(json);\n    } catch (err) {\n      swal(\"Oops!\", \"Seems like we couldn't fetch the info\", \"error\");\n    }\n  }\n  ```\n\n## Using with React\n\nSweetAlert has tools for [integrating with your favourite rendering library.](https://sweetalert.js.org/guides/#using-with-libraries).\n\nIf you're using React, you can install [SweetAlert with React](https://www.npmjs.com/package/@sweetalert/with-react) in addition to the main library, and easily add React components to your alerts like this:\n\n```javascript\nimport React from 'react'\nimport swal from '@sweetalert/with-react'\n\nswal(\n  \u003cdiv\u003e\n    \u003ch1\u003eHello world!\u003c/h1\u003e\n    \u003cp\u003e\n      This is now rendered with JSX!\n    \u003c/p\u003e\n  \u003c/div\u003e\n)\n```\n\n[Read more about integrating with React](https://sweetalert.js.org/guides/#using-react)\n\n## Contributing\n\n### If you're changing the core library:\n1. Make changes in the `src` folder.\n2. Preview changes by running `npm run docs`\n3. Submit pull request\n\n### If you're changing the documentation:\n1. Make changes in the `docs-src` folder.\n2. Preview changes by running `npm run docs`\n3. Run `npm run builddocs` to compile the changes to the `docs` folder\n4. Submit pull request\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](https://github.com/t4t5/sweetalert#contributing)].\n\u003ca href=\"https://github.com/t4t5/sweetalert/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/SweetAlert#backer)]\n\n\u003ca href=\"https://opencollective.com/SweetAlert#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/SweetAlert#sponsor)]\n\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/SweetAlert/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/SweetAlert/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4t5%2Fsweetalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft4t5%2Fsweetalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft4t5%2Fsweetalert/lists"}